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
    }])
  },
相关推荐
qp20 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
随笔记1 天前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
疾风铸境2 天前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
try again!2 天前
rollup.js 和 webpack
开发语言·javascript·webpack
依旧7052 天前
webpack打包流程
webpack
ak啊2 天前
Webpack打包过程中的核心机制-Chunk 的生成与优化
前端·webpack·源码
挖稀泥的工人2 天前
面试看这一篇webpack
前端·webpack
雾散尽时2 天前
Webpack在项目中的配置与工作原理解析
webpack
程序员黄同学3 天前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
jndingxin3 天前
OpenCV 图形API(5)API参考:数学运算用于执行图像或矩阵加法操作的函数add()
opencv·webpack·矩阵