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

Question

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:

I tried utilizing CommonsChunkPlugin with this config:

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

And got this result:

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)

Daniel Birowsky Popeski · Accepted Answer · 2018-01-06T19:22:47.457

2

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.

edited Jan 06 '18 at 19:22

answered Jan 06 '18 at 18:59

Daniel Birowsky Popeski

8,752
12
60
125

I have the exact same problem. When I put 2, for some weird reason it stop working. Do you manage to solve it in another way? Or just use it with 3?.. – nachodd Feb 25 '21 at 20:21
Yep, I still have 3 over there. Haven't thought about it since. It works. I'm happy. – Daniel Birowsky Popeski Feb 25 '21 at 21:15

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

1 Answers1