Webpack 4 SplitChunks, grouping asynchronous chunks to certain size

Question

We are trying to optimize our webpack bundling.Now we have a lot of small chunks generated, but we want to group them according to some rules:

• Node modules and code should be separated, eg. A chunk is either all node_modules or all code
• Each chunk size should be larger then 20KB
• I kind of achieve the file size constraints, but the problem in the end is that on the first page load, all the chunks are downloaded at once, I split the file because I want them to be donwloaded only when it is needed, not all at once. The following are the steps I did to get to this point. If you can point me to the right way it would be really appreciated

1.The current situation

Settings:

optimization: {
  splitChunks: {
    chunks: 'all', // optimize both static and dynamic import
    maxAsyncRequests: 5, // for each additional load no more than 5 files at a time
    maxInitialRequests: 3, // each entrypoint should not request more then 3 js files
    automaticNameDelimiter: '~', // delimeter for automatic naming
    automaticNameMaxLength: 30, // length of name
    name: true, // let webpack calculate name
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        enforce: true // seperate vendor from our code
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
},

You can see there are lots of small files

2.To understand where the small chunks come from, I force merge the asynchronous chunks into two, one from node_modules and one from code

Setting

optimization: {
  splitChunks: {
    ... same as before ...
    cacheGroups: {
      async_vendor: {
        test: /[\\/]node_modules[\\/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
      },
      async_code: {
        chunks: "async",
        priority: 10,
        name: "async_code",
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        enforce: true // seperate vendor from our code
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
},

No more small files, so the small files are asynchronous chunks

3.So now those small files are in my control of those 2 cachegroups, I attempt to break them into smaller files

Setting

optimization: {
  splitChunks: {
    ...same as before...
    cacheGroups: {
      async_vendor: {
        test: /[\\/]node_modules[\\/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
        maxSize: 200000,
        minSize: 200000,
      },
      async_code: {
        chunks: "async",
        priority: 10,
        name: "async_code",
        maxSize: 200000,
        minSize: 200000,
      },
      ...same as before...
    }
  },
},

This look exactly what I wanted. Only one problem is that all these files are loaded when I visit the first page. Which does not happen in the original scenario(1.). I suspect that it's because I force the name into cacheGroup. But If I don't force the name, then small chunks are generated

4.Here is what happen if I don't specify the cachegroup name :(

Setting

optimization: {
  splitChunks: {
    ... same as before ...
    cacheGroups: {
      async_vendor: {
        test: /[\\/]node_modules[\\/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
        maxSize: 200000,
        minSize: 200000,
      },
      async_code: {
        chunks: "async",
        priority: 10,
        maxSize: 200000,
        minSize: 200000,
      },
      ... same as before ...
    }
  },
},

Is it possible to solve this problem in splitchunk? Thank you for all your help

Answer 1

First of all, I think you've got wrong understanding of splitChunks.chunks attribute. It helps to optimize the splitting of modules which are referenced in splitChunks.chunks type of chunks. For eg. chunks=async, it will consider the modules referenced from async chunks and split/optimize them.

Coming back to the original question,

1. Current Situation: All your modules above 20KB(default) are splitted into chunks, irrespective of whether they are referenced from async or initial chunks. There are other constraints as well, but let's hop over them for now.

2. To understand where the small chunks come from, I force merge the asynchronous chunks into two, one from node_modules and one from code: Now all your modules referenced from async chunks are bundled into vendor and code chunks. This might be because modules from all small chunks(larger than 20KB) were referenced from both async and initial chunks. Could try with chunks: initial, I would expect the same result.

3. Since entry/initial code has references in async_vendor and async_code chunks, they are correspondingly loaded.

To answer the original question, using 3rd config for initial chunks(chunks:initial) should help.