Bundle Treemap
Bundle size by module, laid out by compressed size. Raw bytes overstate text-heavy modules dramatically — a 400KB locale file that gzips to 12KB dominates a raw treemap and barely matters on the wire.
src/components/ui/bundle-treemap.tsxAbout
From the component's own source, where it was written.
Bundle size by module, as a treemap.
Area is size, so the thing taking the space is the thing that looks big. A sorted bar chart answers "what is largest"; a treemap answers "what is this bundle *made of*", which is the question you have when a build doubles.
Gzipped size drives the layout when it is supplied. Raw bytes overstate text-heavy modules dramatically — a 400KB locale file that gzips to 12KB dominates a raw-size treemap and is nearly irrelevant on the wire.
Squarified layout, not a naive slice-and-dice: long thin slivers cannot be compared by eye or clicked, which defeats the point of the shape.
Install
npx astralyx-ui add bundle-treemap
Usage
import { BundleTreemap } from '@/components/ui/bundle-treemap'
<BundleTreemap modules={modules} />Composer
Change the props and the source below follows.
Total 1.5 MB284 KB gzipped
<BundleTreemap modules={modules} useGzip={true} />Examples
Where the bytes went
<BundleTreemap modules={modules} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
BundleTreemap
Extends Omit<ComponentProps<'div'>, 'children' | 'height'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| modules | BundleModule[] | required | { name, size, gzip? }. Sizes in bytes. |
| height | number | 260 | — |
| useGzip | boolean | true | Lay out by compressed size when available. Toggle it in the composer to see the locale file take over. |
| totalLabel | ReactNode | 'Total' | — |
| gzipLabel | ReactNode | 'gzipped' | — |
Functions
| Function | Signature | Description |
|---|---|---|
| squarify | (values: number[], width: number, height: number) => [number, number, number, number][] | Squarified treemap over a 0–1 box. Rows are grown while the worst aspect ratio in the row keeps improving, which is what avoids slivers. |
Types
BundleModule
Bundle size by module, as a treemap.
| Field | Type | Description |
|---|---|---|
| name | string | — |
| size | number | Raw bytes. |
| gzip? | number | Compressed bytes. Drives the layout when present. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| layout | squarified | Not slice-and-dice: long thin slivers cannot be compared by eye or clicked, which defeats the shape. |
| why a treemap | composition | A sorted bar chart answers "what is largest". A treemap answers "what is this bundle made of", which is the question when a build doubles. |