解决chunk-vendors包过大问题,利用SplitChunks插件，分离chunk

转载已于 2022-12-20 17:07:55 修改 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/duanhy_love/article/details/126349071

标签

#vue.js #npm #前端

于 2022-12-20 16:34:23 首次发布

Webpack的SplitChunks插件用于提取公共模块，减少重复打包，优化应用加载速度。通过配置，可以设置不同的缓存组，如common、vendors和antDesignVue，分别针对通用模块、第三方库和特定组件进行拆分。缓存组设定包括文件名、最小体积、最大请求数等关键参数。

SplitChunks是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。

module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  chainWebpack(config) {
    if (ISPROD) {
      config.optimization.splitChunks({
        cacheGroups: {
          common: {//commons 一般是是个人定义的
            name: 'chunk-common', // 打包后的文件名
            chunks: 'initial',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {//vendor 是导入的 npm 包
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            maxSize: 600000,
            maxInitialRequests: 20,
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          antDesignVue: {//把antDesignVue从chunk-vendors.js提取出来。当然我们也可以把mixins，vue.min.js等等也按照类似配置提取出来
            name: 'chunk-ant-design-vue',
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: 'initial',
            priority: 3,
            maxSize: 600000,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    }
  }
})