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

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 being shared with 13 other modules now just has 26% code being shared with just 1 other module which is a big achievement.

Here is how we configure the CommonsChunkPlugin:

This reduces the size of our asynchronous bundles by removing common code across them, and extracting them into a shared “common” async bundle.

The trade-off of CommonsChunkPlugin in this case is that it removes duplicate code at the cost of creating an extra network request when requesting a asnyc bundle.

Is the tradeoff worth it?

Yes! The only time that network requests become a bottleneck is when (for HTTP/1) you exceed 5–6 parallel requests (typically seen during initial page load). In most cases, lazy loaded bundles are fetched after all other resources have downloaded for your initial page! So at most we may only have 2–3 parallel requests!

Resources

For further reading about Bundle buddy and webpack-bundle-buddy, please refer to the following links:-

A big thanks to Sam Saccone and Sean T. Larkin for helping me in this, you guys are amazing.

I have immense respect for the both of you and everyone else who is actively maintaining there OSS projects and helping newbies like me.

Conclusion

Use bundle buddy with CommonsChunkPlugin. They work so well together and help us in making our bundles smaller, give us better caching and an improved web performance.

I will be posting more articles related to Web Performance and other plugins that help us with best practices. If you wish to be updated with my latest posts, please find me on Twitter — @viveknayyar09.


Thank you Vivek Nayyar for this community contribution to the webpack open source project!! If you have a great post about webpack and want it featured on our publication, feel free and email our team at webpack@opencollective.com or DM Sean T. Larkin (TheLarkInn) on twitter!

No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by donating to our open collective. Open Collective not only helps support the Core Team, but also supports contributors who have spent significant time improving our organization on their free time! ❤