Skip to content
A tool to identify bundle duplication across splits.
JavaScript TypeScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Add sideway source maps \o/ and update bundle Jul 8, 2017
viz
.gitignore
.npmignore Basic package.json setup Jul 9, 2017
LICENSE.md
README.md Fix contributing steps for CLI, Suggest running with npx Oct 3, 2019
bin.js Add a bin entry point Jul 2, 2017
graph_builder.ts Add optional logging to CLI Jul 8, 2017
index.ts
package.json Bump v0.2.2 Oct 4, 2019
process.ts fix: use exit code 0 when no duplication detected (#26) Nov 2, 2017
server.ts
tsconfig.json 🔍 bundle buddy mvp 🔮 Jun 25, 2017
types.ts feat(process): expose processor and json formatter (#14) Jul 11, 2017
utils.ts
yarn.lock Switch to express for more stability Oct 3, 2019

README.md

Bundle Buddy

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

Example Bundle Buddy UI

Bundle Buddy operates on any source maps, but you must include the source content. It will work for any CSS/JS/TEMPLATES etc. that is mapped.

In webpack this means setting devtool to source-map https://webpack.js.org/guides/development/#source-maps

webpack users

If you are using webpack, you can also try the bundle-buddy-webpack-plugin. This helps ensure you configure your sourcemaps correctly, and lets you run bundle-buddy directly from a webpack build. You might want to use this if you don't want to use bundle buddy standalone!


How to use?

Build your app, then run directly via npx

npx bundle-buddy my-app/public/*.map

Or you can install into your project and run with npm

npm install -g bundle-buddy

bundle-buddy my-app/public/*.map

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, you just need to build the front end once first.

pushd viz
yarn install
yarn build
popd
yarn install
yarn start --demo
You can’t perform that action at this time.