如何使用 Vue CLI 提取多个供应商文件中的特定依赖项

【问题标题】：How to extract specific dependencies in multiple vendor files using Vue CLI如何使用 Vue CLI 提取多个供应商文件中的特定依赖项
【发布时间】：2021-01-28 04:05:26
【问题描述】：

目前在构建单页 Vue CLI 应用程序时，将构建一个包含所有依赖项的供应商块。我正在寻找一种将特定依赖项提取到单独的供应商文件中的方法，因此您将拥有两个。所以在构建之后它看起来像：

  dist/js/chunk-vendors.12344566.js          479.34 KiB                                                               
  dist/js/chunk-vendors-jquery.222e1476.js   138.17 KiB

Laravel mix 似乎提供了similar functionality。我想知道这在 Vue CLI 应用程序中是如何实现的。

【问题讨论】：

标签： javascript vue.js webpack vue-cli

【解决方案1】：

这是通过 Webpack 的 splitChunks.cacheGroups 配置完成的，可以在 vue.config.js 的 configureWebpack 选项中设置。在cacheGroups 对象中，定义“组”来拆分特定的依赖关系：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vuetify: {
            // regex to compare against build resource by path name (e.g., `/node_modules/vuetify`)
            test: /vuetify/,

            // basename of output file
            name: 'chunk-vendors-vuetify'
          }
        },
      },
    },
  }
}

【讨论】：