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.