项目打包过大,进行拆解
配置analyze工具
- umi内置该工具,通过 配置ANALYZE=1开启
package.json
**
"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'],