A bundle stats visualizer turns a webpack or rollup build report into a treemap so you can see at a glance which modules dominate your JavaScript bundle. Large dependencies are the most common cause of slow page loads, and a flat list of sizes is hard to scan. This tool renders module sizes as proportional rectangles, coloured by chunk, entirely in your browser.
How it works
The visualizer first parses your JSON and auto-detects its shape. A webpack stats.json exposes a modules array where each entry has a name, a size in bytes, and a list of chunks; the tool maps chunk IDs to their human names. A rollup-plugin-visualizer export is a tree of nodes carrying value or renderedLength sizes and children, which the tool walks down to the leaves. A plain object mapping module paths to byte counts is also accepted.
Once it has a flat list of modules with sizes, it builds the layout using the squarified treemap algorithm of Bruls, Huizing, and van Wijk. The algorithm fills the canvas row by row, choosing whether to add the next module to the current row based on which option keeps the rectangles closest to square — the “worst aspect ratio” heuristic. The result is a tiling where every tile’s area is exactly proportional to its module’s size and the whole area sums to the canvas.
Reading the result
Bigger tiles mean bigger modules. Tiles are coloured by chunk so you can tell vendor code from your application code, and a legend lists the chunks. Hover any tile to see its exact size, its share of the total, and its chunk. Use this to find oversized dependencies to lazy-load, replace, or tree-shake. Everything runs locally, so private builds stay on your machine.