What it costs
Measured gzip cost per component, for a five-component page and for the catalog ceiling.
What the numbers mean
Every number below is gzip bytes read from dist/components/manifest.json after the build. Nothing is typed by hand. A class module is the component's JavaScript with its CSS inlined; define.js is a few hundred bytes of registration on top.
One component
Median class module: 6.4 KB gzip. The five Phase 1 pilots together: 24.7 KB gzip — the size of a small page that uses one of each.
| Component | Gzip |
|---|---|
ai-response | 36.9 KB |
money-card | 14.8 KB |
data-table | 14.5 KB |
pull-to-refresh | 11.5 KB |
payment-receipt-printer | 11.0 KB |
The catalog ceiling
All 136 class modules, each loaded separately with no bundler: 883.2 KB gzip. That is the ceiling, not a target; it counts duplicated shared code. The generated site shell itself — navbar, footer, directory and page chrome — is 2.0 KB gzip.
Bundled from the import graph
If your bundler sees all the imports, it can emit the shared helpers once. The spring helper is the common case: it appears inline in 29 modules. A dependency import is shared the same way — date-picker (6.4 KB gzip) imports calendar (7.8 KB gzip) instead of copying it, so a page that uses both pays for the calendar once.
Measure your own page instead of trusting an average: build it, then look at the gzip size of the JavaScript your users actually fetch.
Documentation pages
Component reference
Every catalogued component has a page at /components/<slug>/; start from the component directory.