Faster, smaller bundles using Bundle Buddy and webpack’s CommonsChunkPlugin

Vivek Nayyar
webpack
Published in
3 min readNov 1, 2017

--

It’s not an everyday thing that you come across an amazing plugin which helps in reducing all your bundle sizes by a great extent and improves your web performance.

A normal day in office and I installed bundle buddy an amazing plugin by Sam Saccone.

For those not aware of Bundle Buddy, it is described on it’s README as:

Bundle Buddy is a tool to help you find source code duplication across your JavaScript chunks [aka Bundles].

Measure and Diagnosis

After installing bundle buddy, I ran it for the first time and to my surprise my entire codebase had 1351 files bundled into 16 bundles and of those 14 bundles had overlap.

Below is how Bundle Buddy visualizes this for you:

The areas highlighted with red border show that 14 bundles in total have overlap and one of the chunk by the name watch-page has 73% code which is shared with 13 other bundles.

Since I wasn’t very sure about how to resolve this, I did what any developer would do, which is to ask for help on twitter and that’s where I received the solution for this problem from Sean T. Larkin and Sam Saccone.

And that’s exactly what I did and the results were amazing. The bundle buddy results after using CommonsChunkPlugin and async are clearly depicted in this UI:

Optimize and Asses

As we see all the overlap’s that we had in our code disappeared and now we have just one common chunk which has all the code which was previously being shared across multiple modules.

The highlighted portion in red depict that after using CommonsChunkPlugin only 8 bundles have overlap and my watch-page chunk which previously had 73% code

--

--

Vivek Nayyar
webpack

Engineering Manager and Board game enthusiast