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
– Matt Leonowicz, Commented May 11, 2018 at 11:14

tuomassalo · Accepted Answer · 2019-01-03 19:37:02Z

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.

The first solution worked great for me, but I had to change vendors to defaultVendors, see webpack.js.org/plugins/split-chunks-plugin/…

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related