vue-cli3|vue-cli3 打包优化之 splitchunks vue-cli3打包优化之splitchunks

【vue-cli3|vue-cli3 打包优化之 splitchunks】Dllplugin 可以把常用库抽离出来，包括 vue，vuex之类的库。但是 ant design vue 是按需加载，且随时有可能引入新的组件，显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大，所以需要将其再单独抽离出来，我决定在 config.optimization.splitChunks 配置如下：
const IS_PROD = process.env.NODE_ENV === 'production'
module.exports = {
chainWebpack(config) {

if (IS_PROD) { config.optimization.splitChunks({ cacheGroups: { common: { name: 'chunk-common', // 打包后的文件名 chunks: 'initial', // minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, reuseExistingChunk: true }, vendors: { name: 'chunk-vendors', test: /[\\/]node_modules[\\/]/, chunks: 'initial', priority: 2, reuseExistingChunk: true, enforce: true }, antDesignVue: { name: 'chunk-ant-design-vue', test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/, chunks: 'initial', priority: 3, reuseExistingChunk: true, enforce: true } } }) }

}
}
关于 webpack4 的 splitChunks 还是有很多知识需要了解的，下文将进行简要的介绍。
splitChunks 常用参数
name 打包的 chunks 的名字
test 匹配到的模块奖杯打进这个缓存组
chunks 代码块类型必须三选一： “initial”（初始化） | “all”(默认就是 all) | “async”（动态加载）默认 Webpack 4 只会对按需加载的代码做分割。如果我们需要配置初始加载的代码也加入到代码分割中，可以设置为 ‘all’
priority ：缓存组打包的先后优先级，数值大的优先
minSize （默认是30000）形成一个新代码块最小的体积
minChunks （默认是1）在分割之前，这个代码块最小应该被引用的次数
maxInitialRequests （默认是3）一个入口最大的并行请求数
maxAsyncRequests（默认是5）按需加载时候最大的并行请求数
reuseExistingChunk 如果当前的 chunk 已被从 split 出来，那么将会直接复用这个 chunk 而不是重新创建一个
enforce 告诉 webpack 忽略 splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests，总是为这个缓存组创建 chunks