分析
利用umi自带的包模块结构分析工具analyze查看每个模块的大小
npm run analyze
或 yarn analyze
配置
在.umirc.js
文件中,配置chainWebpack
chainWebpack(config) {
config.merge({
optimization: {
minimize: true,
splitChunks: {
chunks: 'async', // initial、async和all
minSize: 30000, // 形成一个新代码块最小的体积
minChunks: 2, // 引入两次及以上被打包
automaticNameDelimiter: '.',
cacheGroups: {
vendor: { // 打包两个页面的公共代码
name: 'vendors', // 分离包的名字
test: /^.*node_modules[\\/](?!lodash|antd|moment).*$/,
chunks: 'all',
priority: 100, // 打包优先级
},
echarts: {
name: 'echarts',
test: /[\\/]node_modules[\\/]echarts[\\/]/,
chunks: 'async',
priority: 100,
},
commons: { // 其余同步加载包
name: 'commons',
chunks: 'all',
minChunks: 2,
priority: 80,
},
},
},
},
});
//过滤掉momnet的那些不使用的国际化文件
config
.plugin('replace')
.use(require('webpack').ContextReplacementPlugin)
.tap(() => {
return [/moment[/\\]locale$/, /zh-cn/];
});
},