vue.js - 如何分割@ vue/cli 3 “pages”供应商文件

我在Vue Cli doc中遵循此主题Build the app in multi-page mode，它工作正常，但我意识到只有1个供应商文件，而不是2个(每个页面条目)。

如何分割供应商文件？我不想在多个页面条目之间共享一个不必要的大供应商文件。 (我想在单个应用程序中拥有它)。





对于上面的屏幕截图，我想为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

关于vue.js - 如何分割@ vue/cli 3 “pages”供应商文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51242317/