umi2.x(webpack4.x)打包优化

优化缘由

1. 项目越来越大,依赖越来越多,
2. 打包后的js 越来越大 其中最大的js文件通过nginx gzip压缩后 还有 4MB, 影响客户体验.

查看文件打包分析

cross-env ANALYZE=1 umi build

优化方法

1. 删除代码中冗余的,没有用到的第三方依赖
2. 将用得很少的依赖 从 node_modules 中直接复制粘贴到本地项目代码中(实现按需加载), 并npm uninstall 此依赖
3. 使用 umi-plugin-react 插件的chunks 和 umi的 chainWebpack 配置项 将依赖打包到不同多个文件中

以下是umi 配置文件相关代码

 plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: {
          hmr: true,
        },
        chunks: [
          'vendors',
          'antd',
          'echarts',
          'umi'],
      },
    ],
  ],

config.optimization.splitChunks({
    chunks: 'all',
    automaticNameDelimiter: '～',
    name: true,
    minSize: 30000,
    minChunks: 1,
    cacheGroups: {
      echarts: {
        name: 'echarts',
        chunks: 'async',
        test: /[\\/]node_modules[\\/](echarts|bizcharts)[\\/]/,
        priority: -9,
        enforce: true,
      },
      antd: {
        name: 'antd',
        test: /[\\/]node_modules[\\/](@ant-design|antd|antd-mobile)[\\/]/,
        priority: -10,
        enforce: true,
      },
      vendors: {
        name: 'vendors',
        test: /[\\/]node_modules[\\/]/,
        priority: -15,
        enforce: true,
      },
    },
  });

相关文档

UMI 配置优化 - 优化打包体积，提高打包速度、提高热更新速度etc

webpack4 optimization配置splitChunks和namedChunks