Keep your React app's bundle honest across every release

React projects span a wide range of bundler choices — webpack under Create React App, Rollup via Vite, esbuild via modern setups — which makes consistent bundle tracking harder than it sounds. The most portable approach is source-map-explorer: it reads the source maps your bundler already emits alongside the built JavaScript, attributes every byte to its module, and writes a JSON file dendrobundle understands. If you are already on Vite, the rollup-plugin-visualizer raw-data path produces richer per-chunk data and is the better choice there.

Set it up for React

The most broadly compatible method for React is source-map-explorer run against your built JavaScript: it reads the source maps that ship with every modern production build and produces JSON dendrobundle parses directly. Vite-based React can alternatively use rollup-plugin-visualizer with the raw-data template.

# 1. build with source maps, then extract the module breakdown
#    (CRA emits them by default; for Vite use 'dist/assets/*.js')
npm run build
npx source-map-explorer --json 'build/static/js/*.js' > stats.json

# 2. submit the snapshot
curl -sS "https://dendrobundle.com/api/push?branch=$(git branch --show-current)&commit=$(git rev-parse HEAD)" \
  -H "Authorization: Bearer $DENDROBUNDLE_TOKEN" \
  -H "Content-Type: application/json" \
  -d @stats.json

Full details on the supported formats and CI integration pages.

React bundle tracking — FAQ

Does this work for Create React App projects?
Yes. CRA's production build emits source maps by default. Run source-map-explorer against the built .js files, pass --json to write output dendrobundle can parse, and you have full module-level attribution. The only prerequisite is that source maps are present — which CRA provides out of the box.
My React app uses code splitting. Does dendrobundle handle multiple chunks?
Yes. source-map-explorer accepts multiple JS files and merges their maps, and dendrobundle stores every asset the stats file describes. Each dynamically imported chunk shows up as a separate entry, and the treemap is navigable by chunk. Budget rules apply per-asset, so you can set tighter limits on your main bundle than on lazy-loaded feature chunks.
I care about gzip / brotli size, not raw size. Does that matter here?
dendrobundle stores raw byte counts from the stats file because those are what the bundler reports with per-module fidelity. Compressed sizes cannot be attributed at the module level — a module's contribution to the compressed total is non-linear. Tracking raw growth across commits is a reliable proxy: a raw regression that exceeds your budget almost always has a corresponding compressed-size cost.
Do I need source maps in production for this to work?
Only at build time, not in the deployed application. The common pattern is to emit source maps during the CI build step that generates stats, then omit them from deployed assets. dendrobundle consumes the stats file produced from those source maps; it never needs to access your production deployment.

Create a free account and push your first React snapshot today — no credit card, no SDK to install — or drag a source-map-explorer JSON into dendrobundle.com/analyze to see your module breakdown right now.

create a free account