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.

Answer 1

I found two (imperfect) ways to avoid that.

1. 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
       },
     },
   },
   

2. you can use webpack.optimize.MinChunkSizePlugin that will bundle you small chunk to another one, albeit not necessarily with the best optimized option.