perf(www): move heavy route deps out of the critical import graph

[mehdibha]

Problem

Prod landing page scores 58 on Lighthouse mobile (FCP 6.8s, LCP 9.1s). The SSR HTML arrives in ~400ms, but every page modulepreloads 140 chunks / 858 KB gz (entry chunk alone 454 KB gz), saturating a mobile connection before first paint.

Route-level code splitting is on (Start default), but module-level bindings in route files referenced by loader/beforeLoad stay in the router's critical import graph — and everything they touch ships on every page:

• docs/$.tsx — clientLoader (with the whole MDX render component inside) is referenced by the loader → the entire docs pipeline incl. shiki (~330 KB raw) in the entry
• demos/$slug.tsx — module-level helper → the full demos barrel (215 KB raw)
• preview/$slug.tsx — beforeLoad + module promise cache → examples barrel, components-list, and decodePreset → pako
• __root.tsx — create/preset barrel import → codec → pako again

Fix

• Move each route's component + heavy deps into non-route -page.tsx files; loaders warm them via dynamic import of the same module (same chunk the component needs — no extra fetch).
• Deep-import the create/preset barrel where only DEFAULTS/hooks/types are needed, keeping the codec (pako) out of the root graph.
• Request the landing showcase GitHub avatars at 96px (?size=96) instead of full size (shuding's was 254 KB → 11 KB; ~430 KB saved across six).

Result (measured on the prod build)

	before (prod today)	after
entry chunk gz	454 KB	215 KB (−53%)
landing modulepreloads	140	46
preloaded total gz	858 KB	406 KB (−53%)
Lighthouse mobile (local, gzip)	58	60 — FCP 6.8→5.0s, LCP 9.1→5.0s

Hero LCP element render delay: 2742ms → 132ms. Local Lighthouse understates the win (no brotli/CDN) — please check the Vercel preview score on this PR.

Verified in the browser on the prod build: landing, docs (code highlighted), /create (iframe + controls), /preview/$slug all render; the only console error (React #418 hydration mismatch on docs) exists on prod today, unrelated.

Suggested refactors

• zod (132 KB raw) is now the feat: core components #2 entry item, pulled in by two tiny validateSearch schemas — in progress separately, along with lazy search dialog and a CI perf budget (resurrecting ci(www): add client bundle perf budget check #419; the closed perf(www): move shiki off the entry bundle #415–419 batch never merged, which is how this regressed silently).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dotui	Ready	Preview	Aug 28, 2026 9:46pm