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.

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.

Answer 2

Using vue 3 version 4.5.15 with vue router and some little code generates a ~1 mb package (in dist folder after compiling). Is this normal or is there potential to make the build smaller?

Further, is it also standard, that a raw project created with vue create myproject and then install vue router comes with a "node_modules" folder, that contains approx 120 mb of libs? Does the content of this node_modules folder ever change or is it enaough to store this one only once and not with every source backup?