关于前端:vuecli3-打包优化之-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