乐趣区

关于前端:vuecli3-打包优化之-splitchunks

jiezi

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

退出移动版