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

诸葛卍军师2023-08-27 17:32

在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
    }])
  },