Bundle Size Explorer
A treemap of what's actually making your JavaScript bundle big.
AdvancedWeb appData viz14–28hAI-buildable 3/5no setupworth shipping
Load a bundle stats file and render it as a zoomable treemap where rectangle area is byte size. Clicking a module drills in. The layout algorithm and the drill-in navigation are the interesting parts, and the result tells you something genuinely useful about your own projects.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Load a bundle stats JSON file
- Render modules as a treemap sized by bytes
- Clicking a rectangle drills into that subtree
- A breadcrumb trail navigates back out
- Hovering shows exact size and full module path
- Colour encodes depth or package rather than being decorative
- Very small modules are grouped rather than rendered as invisible slivers
The interesting part
- Implementing a squarified treemap layout that stays readable
- Handling thousands of nodes without blocking the main thread
- Making the drill-in transition legible rather than disorienting
Once it works
- Compare two stats files to show what grew
- Filter to a single package
- Add a keyboard-navigable tree view alongside the treemap
Suggested stack
reacttypescripttailwindd3-hierarchy