perf(frontend): route-level code splitting — 1.0 MB gzip main chunk #723

New issue

Open

opened 2026-09-25 08:50:07 +02:00 by dries · 0 comments

dries commented

2026-09-25 08:50:07 +02:00

Owner

Follow-up from the perf report (item 8).

Symptom: `frontend/src/App.tsx:6-16` imports every page statically. The production main chunk is 3.4 MB raw / 1.0 MB gzip and contains xterm, chart.js, @xyflow/react, dagre, dnd-kit, @assistant-ui and the highlight.js common set; only `mermaid` is dynamic (`MarkdownText.tsx:20-22`). `@pierre/diffs` (shiki) pulls 400+ grammar chunks + a 622 KB wasm chunk on first diff render. No `build.rollupOptions.output.manualChunks` in `vite.config.ts`.

Fix: `React.lazy` the Dashboard/Analytics (chart.js), Factory (xyflow + dagre), Worktrees, Terminal dock (xterm), Settings, Inbox and Routines routes in `App.tsx:480-508` with a Suspense fallback; the session page stays eager. Check the e2e suite still passes (lazy routes change the initial-render timing).

Follow-up from the perf report (item 8). **Symptom:** \`frontend/src/App.tsx:6-16\` imports every page statically. The production main chunk is 3.4 MB raw / 1.0 MB gzip and contains xterm, chart.js, @xyflow/react, dagre, dnd-kit, @assistant-ui and the highlight.js common set; only \`mermaid\` is dynamic (\`MarkdownText.tsx:20-22\`). \`@pierre/diffs\` (shiki) pulls 400+ grammar chunks + a 622 KB wasm chunk on first diff render. No \`build.rollupOptions.output.manualChunks\` in \`vite.config.ts\`. **Fix:** \`React.lazy\` the Dashboard/Analytics (chart.js), Factory (xyflow + dagre), Worktrees, Terminal dock (xterm), Settings, Inbox and Routines routes in \`App.tsx:480-508\` with a Suspense fallback; the session page stays eager. Check the e2e suite still passes (lazy routes change the initial-render timing).