1.打包分析
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 在plugin里 new BundleAnalyzerPlugin ()就可以了
2. 设置optimization.splitChunks，配置如下
根据第一步打包分析出来包的大小，自行划分就可以了
chunks: 'all',
name:false,
cacheGroups: {
commons: { // 其它包
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
},
react: { // react包
test: (module) => {
return /react|redux|prop-types/.test(module.context);
}, // 直接使用 test 来做路径匹配，抽离react相关代码
chunks: "initial",
name: "react",
priority: 10,
},
echarts: { // 巨大的第三方包
test: (module) => {
return /echarts|@antv\/g2|antv|g2/.test(module.context);
}, // 直接使用 test 来做路径匹配，抽离echarts,antv/g2相关代码
chunks: "initial",
name: "echarts",
priority: 10,
},
other: { // 中等的第三方包
test: (module) => {
return /moment|rxjs|antd-mobile/.test(module.context);
}, // 直接使用 test 来做路径匹配，抽离moment/rxjs/antd-mobile相关代码
chunks: "initial",
name: "other",
priority: 10,
}
},
