umi项目配置webpack优化打包体积

分析

利用umi自带的包模块结构分析工具analyze查看每个模块的大小
npm run analyze 或 yarn analyze

配置

在.umirc.js文件中，配置chainWebpack

chainWebpack(config) {
    config.merge({
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'async',     				// initial、async和all
          minSize: 30000,					// 形成一个新代码块最小的体积
          minChunks: 2,						// 引入两次及以上被打包
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {						// 打包两个页面的公共代码
              name: 'vendors',				// 分离包的名字
              test: /^.*node_modules[\\/](?!lodash|antd|moment).*$/,
              chunks: 'all',
              priority: 100,				// 打包优先级
            },
            echarts: {
              name: 'echarts',
              test: /[\\/]node_modules[\\/]echarts[\\/]/,
              chunks: 'async',
              priority: 100,
            },
            commons: {						// 其余同步加载包
              name: 'commons',
              chunks: 'all',
              minChunks: 2,
              priority: 80,
            },
          },
        },
      },
    });
    //过滤掉momnet的那些不使用的国际化文件
    config
      .plugin('replace')
      .use(require('webpack').ContextReplacementPlugin)
      .tap(() => {
        return [/moment[/\\]locale$/, /zh-cn/];
      });
  },

优化效果

参考

webpack4之splitchunksPlugin代码包分拆