The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

4:11
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Steve

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?

Avatar
Kent C.

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.

In reply to Steve
Avatar
Steve

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

In reply to Kent C.
Avatar
Kent C.

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!

In reply to Steve
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?