Route-level code splitting for faster mobile first paint #106

Closed
opened 2026-07-22 04:38:20 +00:00 by steve · 0 comments
Owner

Part of #96. Perf; lands independently.

Problem. The Vite build warns that a chunk is >500 KB minified (confirmed on npm run build). Everything — the heavy editor (canvas, gestures, geometry) plus every page — ships in one bundle, so a phone on cell data downloads and parses the whole app before the login screen paints.

Do.

  • Lazy-load routes with React.lazy / TanStack Router lazy routes so the editor (the biggest dependency surface: @use-gesture, the canvas tree) and the other pages split into their own chunks. Login/register should be a small first paint.
  • Add sensible manualChunks (or route-level splitting) so shared vendor code isn't duplicated across chunks.
  • Provide a lightweight suspense fallback consistent with the app's look.
  • Confirm the embedded-dist flow (make buildinternal/webdist/dist) still serves the split chunks correctly (hashed filenames, the SPA fallback, and embed.FS).

Acceptance.

  • The initial JS for /login is materially smaller than today's single bundle.
  • The >500 KB warning is gone or the editor is isolated in its own lazy chunk.
  • make build produces a working static binary; all routes still load.

No behavior change; measure before/after bundle sizes in the PR description.

Part of #96. Perf; lands independently. **Problem.** The Vite build warns that a chunk is >500 KB minified (confirmed on `npm run build`). Everything — the heavy editor (canvas, gestures, geometry) plus every page — ships in one bundle, so a phone on cell data downloads and parses the whole app before the login screen paints. **Do.** - Lazy-load routes with `React.lazy` / TanStack Router lazy routes so the **editor** (the biggest dependency surface: `@use-gesture`, the canvas tree) and the other pages split into their own chunks. Login/register should be a small first paint. - Add sensible `manualChunks` (or route-level splitting) so shared vendor code isn't duplicated across chunks. - Provide a lightweight suspense fallback consistent with the app's look. - Confirm the embedded-`dist` flow (`make build` → `internal/webdist/dist`) still serves the split chunks correctly (hashed filenames, the SPA fallback, and `embed.FS`). **Acceptance.** - The initial JS for `/login` is materially smaller than today's single bundle. - The >500 KB warning is gone or the editor is isolated in its own lazy chunk. - `make build` produces a working static binary; all routes still load. No behavior change; measure before/after bundle sizes in the PR description.
steve added the infrafrontend labels 2026-07-22 04:38:20 +00:00
steve closed this issue 2026-07-22 06:18:23 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: steve/pansy#106