Webpack减少打包数量和体积(Umi 3.*中)

在UMI 3.*中配置:

javascript 复制代码
export default defineConfig({
  chunks: ['vendors', 'umi'],
  chainWebpack: function (config: any, { webpack }: any) {
    config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [
      {
        maxChunks: 5, // 必须大于或等于 1,此处设置文件数量
        chunkOverhead: 100,
      },
    ]);

    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }: any) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,
            },
          },
        },
      },
    });
  },
});

在webpack中:

javascript 复制代码
  const webpack = require('webpack')
  chainWebpack: (config) => {
    config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
      maxChunks: 5, // 必须大于或等于 1,此处设置文件数量
      minChunkSize: 100, // webpack官网意思是合并小于设置数量大小文件,如果产生的文件大小小于设置值,那么直接和其他的文件合并,目前该配置没有产生效果, 采用下面新属性chunkOverhead
      chunkOverhead: 100
    }])
  },
相关推荐
dwqqw18 小时前
opencv图像库编程
前端·webpack·node.js
昔冰_G1 天前
解锁webpack:对html、css、js及图片资源的抽离打包处理
前端·javascript·css·webpack·npm·html·打包
明远湖之鱼2 天前
手把手带你实现一个自己的简易版 Webpack
前端·webpack·源码
jserTang2 天前
前端构建工具漫谈:Webpack、Vite、Turbopack 与 Rspack 的终极对决
前端·webpack·vite
萌萌哒草头将军3 天前
尤雨溪 VoidZero 公司推出新一代ts文件打包工具 tsdown 🚀🚀🚀
vue.js·webpack·typescript
执梦起航4 天前
webpack理解与使用
前端·webpack·node.js
二川bro4 天前
webpack 中 chunks详解
前端·webpack·node.js
果酱小米粥5 天前
关于使用webpack构建的vue项目,如何使用windicss
前端·webpack·node.js
尘寰ya8 天前
前端面试-工程化(webpack、vite)
前端·面试·webpack
二川bro9 天前
深度解析 Vue 项目 Webpack 分包与合包 一文读懂
前端·vue.js·webpack