webpack性能优化（一）

1通过code splitting（代码分割）来获取更小的 bundle，优化资源加载
答：使用 SplitChunksPlugin 去重和分离 chunk，

// config optimization
config.optimization.splitChunks({
chunks: "all", //默认async,和 initial,all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享
// cacheGroups缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项,test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\/]node_modules[\/]/,
priority: 10,
chunks: "initial"
},
elementUI: {
name: "chunk-elementUI", // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\/]node_modules[\/]?element-ui(.*)/
},
antDesignUI: {
name: "chunk-antDesignUI", // split antDesignUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\/]node_modules[\/]?ant-design(.)/ // in order to adapt to cnpm
},
viewDesignUI: {
name: "chunk-viewDesignUI", // split viewDesignUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\/]node_modules[\/]_?view-design(.)/
},
vantUI: {
name: "chunk-vantUI", // split vantUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\/]node_modules[\/]_?vant(.*)/
},
echarts: {
name: "chunk-echarts",
test: /[\/]node_modules\/?echarts[\/]/,
priority: 5
},
styles: {
name: "styles", // split styles
test: /.(le|sa|sc|c)ss$/,
priority: 5
},
commons: {
name: "chunk-commons",
test: resolve("src/components"), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true // 是否可以重用使用该chunks
}
}

参考文献：https://blog.csdn.net/qq575792372/article/details/116528241
https://wenku.baidu.com/view/bcd1090a1a2e453610661ed9ad51f01dc381574f.html
https://blog.csdn.net/weixin_45844049/article/details/120044485