Why it matters
Bundles grow quietly: a date library pulled in for one function, two copies of a helper package at different versions, a whole utility library imported for a single call. The bundle file itself doesn't say where its bytes came from, but its source map does: every position in the minified code points back to an original file.
This explorer decodes the map's Base64 VLQ mappings and walks the bundle, giving each byte to the source file its mapping points at, then groups files by npm package. The treemap shows the split at a glance, the tables give exact numbers and each package's gzipped size, and packages installed at more than one path are flagged as duplicates. It works with webpack, Rollup, Vite, esbuild and Parcel output, and everything happens in your browser.
How it works
- InputA JavaScript bundle and its .map
- In your browserEvery byte traced back to its source file
- OutputA treemap, package sizes, gzip and duplicates
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Package | Bytes | Share | Files | Gzipped alone |
|---|---|---|---|---|
| react-dom | 11 KB | 47.3% | 1 | 2.3 KB |
| lodash | 6.2 KB | 26.2% | 1 | 1.3 KB |
| react | 2.0 KB | 8.3% | 1 | 538 B |
| tslib | 1.6 KB | 6.9% | 2 | 488 B |
| date-fns | 1.4 KB | 6% | 1 | 427 B |
| (your code) | 724 B | 3% | 3 | 433 B |
| (webpack runtime) | 416 B | 1.7% | 1 | 203 B |
How to use it
- Build your app with source maps switched on.
- Drop the .js bundle and its .js.map (or a bundle with an inline map).
- Read the treemap and the package table: biggest first.
- Fix duplicates and heavy imports, rebuild and compare.
FAQ
Why are my numbers different from the bundle's file size?
They shouldn't be: every byte is counted, and bytes the map doesn't cover are shown as unmapped. Gzip sizes per package add up to more than the whole bundle gzipped, because each package is compressed without the others' shared patterns.
What does 'bundled 2 times' mean?
The same package appears under two node_modules paths, usually because two dependencies want different versions. npm dedupe, or aligning versions, often removes one copy.
Does it need sourcesContent?
No. Sizes come from the mappings alone. sourcesContent is only needed to show original code, which the stack trace resolver does.
Which bundlers work?
Any that write standard version 3 source maps: webpack, Rollup, Vite, esbuild, Parcel, Terser and others, including index maps with sections.
Is my code uploaded?
No. Files are read and measured in your browser. The sample is a made-up bundle served from this site.
