Why is Webpack generating 2 chunks per dynamic import()?

Question

I've started using some dynamic import() statements like so

import(/* webpackChunkName: "chart" */'./Chart')

the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has everything that I expected to be in one new chunk).

My config has nothing fancy in it. I have only one named entry called client and that was my only bundle before using the dynamic require. This happens for both development and production mode. I'm using Webpack ver. 4.8.1

Any ideas how to achieve just one new chunk? I don't want the client to make 2 requests instead of one.

That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped) — Matt Leonowicz, May 11 '18 at 11:14

score 4 · Answer 1 · edited Jan 03 '19 at 19:37

4

I found two (imperfect) ways to avoid that.

If your app have a single entry, you can remove the vendors cache group altogether since this vendor group is designed for multi-entry apps.
```
optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: false, // not needed for a single entry app
    },
  },
},
```
you can use webpack.optimize.MinChunkSizePlugin that will bundle you small chunk to another one, albeit not necessarily with the best optimized option.

edited Jan 03 '19 at 19:37

tuomassalo

8,717
6
48
50

answered Jun 12 '18 at 08:05

Nicolas Ch

41
4

1

The first solution worked great for me, but I had to change `vendors` to `defaultVendors`, see https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks – danvk Oct 18 '21 at 22:40

Why is Webpack generating 2 chunks per dynamic import()?

1 Answers1