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

Question

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

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

Laravel混合物似乎提供了类似的功能。我想知道这在Vue CLI应用程序中是如何实现的。

Answer 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'
}
},
},
},
}
}