When building a JavaScript application, it is common to minify code and bundle files together. This optimizes network requests so the app loads faster.

Large applications use a technique called code splitting. Typically, this breaks up the bundles by each route in your application so users only download the code necessary for each page.

Code splitting however is a delicate balance between limiting the number of files a user must download, and the size of those files.

In complex applications, there are many dependencies which makes it difficult to identify this sweet spot. There are also several parameters to tune while code splitting, but it's difficult to see the impact of changing them.

To help with this balancing act, Sam and I made Bundle Buddy (demo) to examine if your bundles are duplicating too much code at the cost of reducing the file count.

Proof of Concept

The initial hypothesis: Do any of the bundles have code that overlaps with other bundles?

To start, we plotted the source files as a bar chart. The height is the number of lines of code and the color is the number of duplicate bundle files that code appears in.

The largest group of light purple lines are input files that have no overlapping lines in the output files. The following groups in pink increase in darkness the more times that file appears in multiple bundled files.

Now that we know there are overlapping lines, we wanted to understand how are these source files related to the bundled files?

We turned the files and their overlapping lines into relationships for a network diagram.

• Each circle is a file
• Blue circles are output files
• Grey circles are input files without overlaps
• Pink files are input files with overlaps
• Links mean code is going from the source file into the bundled file

With the network view you can quickly see that there is one large group of interrelated input and output files that make up the share of highly redundant code.

These initial explorations gave us motivation to create a tool.

Final App

I worked with Sam who conceptualized this idea and wrote the code for parsing the source maps to generate the data needed for the application.

We iterated on multiple versions of the app before landing on this final version. All together here is a gif of the entire workflow showing the complex relationship of files before and after bundling:

1. Find all of the bundled files that have overlapping code.
2. Zoom into one bundle to find the source files the overlapping lines are coming from and the bundles that share those overlapping lines.
3. Open up a source file to see the overlapping code