How to extract specific dependencies in multiple vendor files using Vue CLI

Question

Currently when building a single page Vue CLI app, a single vendors chunk will be built containing all dependencies. I am looking for a way to extract specific dependencies into a separate vendor file, so you would then have two. So after build it would look something like:

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

Laravel mix appears to provide similar functionality. I am wondering how this is possible in a Vue CLI app.

Answer 1

This is done through Webpack's splitChunks.cacheGroups config, which can be set in the configureWebpack option of vue.config.js. In the cacheGroups object, define "groups" to split out specific dependencies:

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