umi拆包记录

543 阅读2分钟

项目打包过大,进行拆解

配置analyze工具

**

  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build"
  },

cross-env 报错不是内部或外部命令 需要独立安装 npm install -g cross-env
通过命令 npm run analyze 即可运行,默认serve:http://127.0.0.1:8888

配置

  chainWebpack: function (config, { webpack }) {
   config.optimization.splitChunks({
     chunks: 'all', // 提取 chunks 的时候从哪里提取,如果为 all 那么不管是不是 async 的都可能被抽出 chunk,为 initial 则会从非 async 里面提取。
     automaticNameDelimiter: '.', // 文件名分隔符
     name: true,  // chunk 的名称,如果设置为固定的字符串那么所有的 chunk 都会被合并成一个,这就是为什么 umi 默认只有一个 vendors.async.js。
     minSize: 30000, // byte, == 30 kb,越大那么单个文件越大,chunk 数就会变少(针对于提取公共 chunk 的时候,不管再大也不会把动态加载的模块合并到初始化模块中)当这个值很大的时候就不会做公共部分的抽取了
     maxSize: 0, // 文件的最大尺寸,优先级:maxInitialRequest/maxAsyncRequests < maxSize < minSize,需要注意的是这个如果配置了,umi.js 就可能被拆开,最后构建出来的 chunkMap 中可能就找不到 umi.js 了。
     minChunks: 1, // 被提取的一个模块至少需要在几个 chunk 中被引用,这个值越大,抽取出来的文件就越小
     maxAsyncRequests: 10, // 在做一次按需加载的时候最多有多少个异步请求,为 1 的时候就不会抽取公共 chunk 了
     maxInitialRequests: 5, // 针对一个 entry 做初始化模块分隔的时候的最大文件数,优先级高于 cacheGroup,所以为 1 的时候就不会抽取 initial common 了。
     cacheGroups: {
       antdesigns: { // antdsign
         name: 'antdesigns',
         chunks: 'all',
         test: /(@antd|antd|@ant-design)/,
         priority: 10,
       },
       react: {
             name: 'react',
             test: /(react|react-dom|react-dom-router)/,
             chunks: 'all',
             priority: 10
           },
       jquery: {
               name: 'jquery',
               test: /(jquery|regl|moment|core-js)/,
               chunks: 'all',
               priority: 10
           },
       '@antv':{
         name: "@antv",
         test: /\@antv/,
         chunks: 'all',
         priority: 10
       },
       lodash: {
             name: "lodash",
             test: /lodash/,
             chunks: 'all',
             priority: 10
       },
       echartsVenodr: {
           // 异步加载echarts包
           name: 'echartsVenodr',
           test: /(echarts|zrender)/,
           chunks: 'all',
           priority: 10, // 高于async-commons优先级
       },
       commons: {
           // 其余同步加载包
           chunks: 'all',
           minChunks: 2,
           name: 'commons',
           priority: 10,
       },
     },
   });

如果打开页面白屏,不要忘了配置chunks

	chunks: ['antdesigns', 'umi','jquery','@antv','lodash'],