What is the chunk-vendors.js file and how is it created? (Webpack)

Question

I had a quick question regarding the chunk-vendors.js file that gets created during the build process for a Vue Js application.

What is it? How is it created?

The reason I'm asking is to better understand how certain things end up in it. I'm finding it actually has some stuff I don't want.

Windbag

Answer 1

The chunk-vendors.js, as its name says, is a bundle for all the modules that are not your own, but from other parties. They are called third-party modules, or vendor modules.

Oftentimes, it means (only and) all the modules coming from the /node_modules directory of your project.

In webpack 3, you had to do it on your own, and you had to do a bit of boilerplate to have at least 2 chunks: one for your own code, and one for the modules from the /node_modules directory.

In webpack 4, it is quite simple: you use optimization.splitChunks with the default options:

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/, // this is what you are looking for
              priority: -10
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }
    };

@vue/cli 3 using webpack 4, it uses the defaults if you don't change the webpack configuration.

Gain

If I have a large dependency that is only used by admin, is it possible to putt it in a separate chunk? It seems like all dependencies get bundled into chunk-vendors.js and sent to all users. – Purkey

I don't really get it. I have a nearly-empty skeleton project created with vue cli that comes with 117kb of JS inside chunk-vendors.js! Why so large? I don't think I've added anything else. Maybe that's just the raw size of Webpack's loader and Vue JS itself? – Thunderstone

Vue 2 or Vue 3? With or without Vuex? With or without Vue-router?... – Gain