bundle-buddy

Bundle Buddy

Bundle Buddy is a tool to help you find source code duplication across your javascript chunks/splits, enabling you to fine tune your code splitting to reduce bundle invalidation rates as well as improve repeat page load performance \o/.

"

Bundly Buddy operates on source maps, meaning that it will work for any content that is source mapped (CSS/JS/TEMPLATES.. ect. ect.) The only limitation here is that the source maps must include the source content.

In webpack this means setting devtool to source-map https://webpack.github.io/docs/configuration.html#devtool

---

How to use?

npm install -g bundle-buddy

bundle-buddy <$SOURCE_MAP_GLOB>

Bundle Buddy UI interactions.

When you select a bundle on the left panel, you can then see the bundle breakdown, which shows you the most duplicated source lines across bundles that the currently selected bundle contains.

After clicking on a bundle chunk we will then show you the lines of the source file that are repeated as well as what other bundles contain said source lines.

Acting on the results.

The ideal workflow flow using Bundle Buddy is to first identify what code is most duplicated across the project's bundles, then to utilize a common code bundling techique (https://webpack.js.org/plugins/commons-chunk-plugin/), then to rebuild your site, and then finally to measure again to see your impact.

How does this work?

Bundle Buddy builds up a mapping across every source map of every file and each line in each file that is used. This enables Bundle Buddy to detect common source lines between different project chunks.

---

Contributing

Working on the front end is simple

cd viz
yarn install
yarn start

Working on the CLI component is also straight forward

yarn install
./node_modules/.bin/ts-node index.ts