13

UMI2分包splitChunks配置

 3 years ago
source link: https://yazhen.me/_posts/2021/UMI2%E5%88%86%E5%8C%85splitChunks%E9%85%8D%E7%BD%AE/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
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 包已经被成功分割了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK