Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

webpack

Share this video with your friends

If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.

Steve Schwarz

~ 8 years ago

I didn't follow the change you made for the vendor common chunk. Are you saying you'd have both common and vendor chunks? Then what ends up in each of those bundles? and how does supplying the chunks in the plugin definition work differently from the entries list containing the same names?

Kent C. Dodds(instructor)

~ 8 years ago

Hi Steve!

Are you saying you'd have both common and vendor chunks?

Yes

What ends up in each of those bundles?

The vendor chunk has the vendor files (the files from the vendor entry as demonstrated in another video). The common chunk has common files between the other entries (as demonstrated in this video).

how does supplying the chunks in the plugin definition work differently from the entries list containing the same names?

The chunks plugin by itself will determine the common modules between all entries (or listed entries if you specify a chunks array) and place those in a separate chunk. The chunk with a name that matches an entry will just be that entry's modules and other chunks will reference that chunk to get those modules.

Steve Schwarz

~ 8 years ago

Hi Kent,

Sorry I think I'm close to following you... In the other video the 'vendor' entry contained ['lodash', 'jquery'] and only those modules ended up in that common bundle. I follow that.

In this video are you saying you would you still have that same vendor entry? Because then I don't understand why the 'app' and 'animalFacts' chunks are being supplied to the vendor common plugin. I'd think without supplying any chunks (and only supplying the name) bundle.vendor.js would still only contain lodash and jquery, bundle.common.js would extract other modules common to the two apps, and the bundle.app.js and bundle.animalFacts each contain what is unique to them.

I think I'm missing something! Thanks

Kent C. Dodds(instructor)

~ 8 years ago

You know what Steve, I think you may be right. I think for this case you wouldn't have to list the chunks for a vendor chunk. I seem to remember @sokra telling me it may be necessary, but I don't think that it is. I'd say give it a shot! Good luck!