我正在遵循Vue Cli文档中关于多页面模式下构建应用程序的主题,它运行良好,但我意识到只有一个供应商文件而不是两个(每个页面入口一个)。
我该如何拆分供应商文件呢? 我不想在许多页面条目之间共享一个不必要的大型供应商文件(我希望将其放在单个应用程序中)。
对于上面的截图,我想为index.xxx.js和report.xxx.js各拥有一个供应商文件。
请给出建议,谢谢。
我正在遵循Vue Cli文档中关于多页面模式下构建应用程序的主题,它运行良好,但我意识到只有一个供应商文件而不是两个(每个页面入口一个)。
我该如何拆分供应商文件呢? 我不想在许多页面条目之间共享一个不必要的大型供应商文件(我希望将其放在单个应用程序中)。
对于上面的截图,我想为index.xxx.js和report.xxx.js各拥有一个供应商文件。
请给出建议,谢谢。
module.exports = {
pages: {
index: {
entry: 'src/monitor/main.js',
template: 'public/index.html',
chunks: ['chunk-common', 'chunk-index-vendors', 'index']
},
report: {
entry: 'src/report/main.js',
chunks: ['chunk-common', 'chunk-report-vendors', 'report']
}
},
chainWebpack: config => {
const options = module.exports
const pages = options.pages
const pageKeys = Object.keys(pages)
// Long-term caching
const IS_VENDOR = /[\\/]node_modules[\\/]/
config.optimization
.splitChunks({
cacheGroups: {
...pageKeys.map(key => ({
name: `chunk-${key}-vendors`,
priority: -11,
chunks: chunk => chunk.name === key,
test: IS_VENDOR,
enforce: true,
})),
common: {
name: 'chunk-common',
priority: -20,
chunks: 'initial',
minChunks: 2,
reuseExistingChunk: true,
enforce: true,
},
},
})
}
}
此内容基于GitHub帖子:https://github.com/vuejs/vue-cli/issues/2381#issuecomment-425038367