What is common.chunk.js?

Question

I have an Angular 5 app, running with angular-cli 1.6.6, when bundle my app, I have (within all the others) a common.chunk.js.

Do you know what it is? It does not match with any of my modules, it's also not the vendor or the main or the polyfill because they have their dedicated chunk.

Answer 1

The common chunk is a place for all the things that more than one of your feature modules use.

Let's say you have a custom grid component in a custom grid module. You then import this grid module into your user and admin feature modules. Because the grid module is used in more than one feature module, Webpack stitches it into a common.chunk that the other feature modules depend on.

If you run the build with chunk naming turned off (--named-chunks false - used by default in --prod builds), the common.chunk becomes 0.chunk - the zeroth chunk that has to be loaded before any other lazy chunks.

One downside of this is that if you have a lot of small lazy modules in your app (which I think is the case judging from the screenshot), the common.chunk will start to get bloated particularly quickly. Say two of your lazy modules use some awesome (yet chubby) charts library. All of the tree-shaken code from the charts library will end up in the common.chunk. Even though the other lazy modules do not use any of this pile of chart code, they still do depend on the common.chunk and will load and execute all of the charts code they don't need.

To see what's what, you can use the webpack-bundle-analyzer to inspect the insides of your built chunks. You can either npm i --D it or use npx to not bloat your dev dependencies.

ng build --prod --stats-json && npx webpack-bundle-analyzer dist/stats.json

Hope this helps a little :-)