webpackwebpack-2commonschunkplugin

How to combine all code-splitted modules into a single file?

I've got an SPA for which I want to split the non-critical code and load it asynchronously right after the critical file is being loaded, but as a single file.

To this end, I'm utilizing import('./module-name') as code-splitting points.

Problem is, in the resulting output, I've got multiple files:

enter image description here

I tried utilizing CommonsChunkPlugin with this config:

  new CommonsChunkPlugin({
    names: ['app'],
    children: true,
    async: true,
  })

And got this result:

enter image description here

While it's nice that aws-sdk is not being duplicated anymore, we're still seeing multiple files in the output.

Again, my goal is to have a single file with the critical code (app.js) and another file for all code that has been split out (0.js)

Solution

  • Fixed by using LimitChunkCountPlugin alongside:

      new LimitChunkCountPlugin({
    maxChunks: 3 //I'll be wondering about the 3 till the day I die
  }),

    Described in the docs. Who knew.