Bundle Size Explorer
Drop a minified JS bundle and its source map. Get a zoomable treemap of exactly which files and npm packages are eating your bundle, decoded byte-by-byte from the source map right here in the tab.
🔒 100% private — your bundle is parsed locally and never uploadedDrop your bundle + source map
or click to choose files · drop the .js and its .map together
Works with webpack, Vite, Rollup, esbuild, Parcel · inline base64 maps supported
Every file, biggest first
How it works
A JavaScript source map records, for every position in your minified bundle, which original file and line it came from. This tool decodes those mappings (the compact base64 VLQ ones) and walks the whole generated file, attributing each run of bytes to the original source it maps back to. Add it all up per file and you get a precise picture of what is actually in your bundle. The same idea powers the source-map-explorer CLI, except here there is nothing to install and nothing to upload.
How is this running in my browser?
All the heavy work happens in a Web Worker so the page never freezes, even on multi-megabyte bundles. Decoding VLQ, summing per-file bytes, building the folder tree and laying out the squarified treemap are all plain JavaScript running on your machine. Your code never leaves the tab, so you can safely analyze private, internal, or unreleased bundles. The gzipped size is measured with the browser's built-in CompressionStream, so that number is real, not an estimate.
What you need
You need the bundle (app.min.js) and its source map. Drop both together, or drop a single .js that has an inline base64 map at the bottom. To produce maps: webpack uses devtool: 'source-map', Vite and Rollup use build.sourcemap: true, esbuild uses --sourcemap, and Parcel emits them by default. You can also analyze a library straight from a CDN by saving its .js and .js.map.
How to read the treemap
Each rectangle is a file, sized by how many bytes it contributes to the bundle. Click any folder to zoom in, and use the breadcrumb to climb back out. Turn on "Group node_modules by package" to roll every dependency up to its top-level package, which is usually the fastest way to spot the one library that is quietly costing you 200 KB.
Is my bundle uploaded anywhere?
No. Parsing and measurement run entirely in your browser in a Web Worker. Your files never touch a server, so it is safe for private and internal code.
What exactly do I drop in?
Your minified bundle and its source map. That can be a .js plus a separate .map, or a single .js with an inline base64 source map. If you only have the .map, drop the matching .js too so byte sizes can be measured.
Which bundlers are supported?
Any tool that emits a standard Source Map v3: webpack, Vite, Rollup, esbuild, Parcel, and more. Indexed (sectioned) maps are handled as well.
Why is some space marked "unmapped"?
Bundler runtime, license banners, and other generated glue often have no source mapping. That space is grouped as "[unmapped]" so the totals always add up to your real bundle size.
Are the sizes bytes or gzipped?
The treemap and per-file numbers are raw (minified) bytes, matching how source-map-explorer reports. The summary also shows the true gzipped size of the whole bundle, measured in-browser.
I build tools like this every day.
Senior full-stack engineer, available for senior or contract work, fully remote. See the rest of the lab or get in touch.