Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

UMI2分包splitChunks配置

发布于:  

umi 分包配置 配置之前 bundle size 是 37.7 MB 配置之后 bundle size 是 18.8 MB 终于降到 20MB 以下了。

结合上一篇查看更多解释

记录UMI2切割包splitChunks功能配置

配置主要是2点

  1. chainWebpack 扩展
  2. react-plugin-react 中 chunks 的设置

话不多说,下面放出相关配置:

chainWebpack: function(config, { webpack }) {
    config.optimization.splitChunks({
      chunks: 'async',
      automaticNameDelimiter: '.',
      name: true,
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 5,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|react-resizable|react-base-table|dva)[\\/]/,
          priority: -10,
        },
        antds: {
          name: 'antds',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](antd|antdesign-ui|rc-calendar|rc-tree-select)[\\/]/,
          priority: -11,
        },
        charts: {
          name: 'charts',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](echarts|echarts-for-react)[\\/]/,
          priority: -12,
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    })
},

然后在 umi-plugin-react 中配置 chunks :

chunks: ["vendors","antds","charts", "umi"],

至此再运行 npm run build 包已经被成功分割了。

~^_^~ 一片小花园 ?

赏赐