a browser-based bundle analyzer for javascript projects. drop in a webpack
bundle analyzer json, a .js.map source map, or a compiled bundle file and
get a visual breakdown of what’s actually shipping to your users.
what it does
- interactive treemap: modules sized by bytes, color-coded by chunk. hover for details, click to drill in. immediately tells you “what’s taking up space”
- file explorer: sortable list of every module in the bundle with raw size, gzipped size, and chunk membership
- optimization insights: flags large dependencies, code-splitting opportunities, duplicate modules across chunks, and gzip-compression efficiency
- multiple input formats: webpack-bundle-analyzer json (richest
output),
.js.mapsource maps (works with vite, rollup, esbuild), raw compiled.jsfiles (best-effort fallback)
how to use
- drop a file onto the upload area at bundleview.dev. webpack analyzer json gives the most detail
- switch between the insights, treemap, and files tabs
- follow the recommendations: code-split the big modules, dedupe shared deps, drop the lodash/moment-shaped weights
processing happens client-side. nothing about your bundle leaves the browser.
why i built it
bundle bloat is one of those problems where you know you should care but the existing tooling makes it a chore. webpack-bundle-analyzer is great when you have it wired up; less great when you just have a build output sitting in front of you. bundleview takes whatever you’ve got (a json report, a source map, a minified file) and gives you the same picture without needing a working dev server.
it’s free, open source, and runs entirely in your browser.