Per-page split chunks

vue.config.js

module.exports = {
  pages: {
    pageA: 'src/pageA.js',
    pageB: 'src/pageB.js',
    pageC: 'src/pageC.js',
  },

  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: {
          vendors: {
            name: 'chunk-vendors',
            priority: -10,
            chunks: 'initial',
            minChunks: 2,
            test: IS_VENDOR,
            enforce: true,
          },
          ...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,
          },
        },
      })
  }
}