[Frontend] Route-level code splitting #105

New issue

Closed

opened 2026-07-14 19:49:49 +00:00 by claude-bot · 0 comments

claude-bot commented

2026-07-14 19:49:49 +00:00

Contributor

Context

src/App.jsx:5-21 eagerly imports all 20 pages, so every route ships in one bundle. The heaviest: CampaignDetail.jsx (2376 lines), WikiArticle.jsx (2115 lines — the sole consumer of react-markdown, imported at WikiArticle.jsx:13, which drags micromark/mdast into the main chunk), and Admin.jsx (1487 lines). There is no React.lazy/Suspense anywhere and no manualChunks in vite.config.js.

Motivation

A player opening the dashboard downloads the entire admin panel and the full markdown toolchain first. Route-level splitting is the single cheapest bundle win available and a prerequisite for reasonable PWA caching.

Fix / Spec

Convert the page imports in src/App.jsx to React.lazy(() => import(...)) and wrap the route outlet in a <Suspense> with a fallback (reuse the app's existing loading UI/spinner rather than inventing a new one).
Keep genuinely tiny/critical pages (e.g. Login) eager if it helps first paint — judgement call, document the choice.
Verify in the build output that react-markdown/micromark land only in the WikiArticle chunk (check vite build output or rollup-plugin-visualizer locally; do not commit the visualizer).
Record before/after vite build chunk sizes in the PR description.
Adjust the test harness if page tests need to await lazy resolution (findBy* instead of getBy*, or a Suspense-aware render helper).

Acceptance criteria

Initial JS payload for the dashboard route drops substantially — state the numbers (before/after) in the PR.
react-markdown is absent from the entry chunk.
All page tests pass with lazy routes.
Navigating to every route works in a production build (vite preview smoke check).

References

src/App.jsx:5-21
src/pages/WikiArticle.jsx:13 (react-markdown import)
vite.config.js

Filed from the July 2026 full-project review.

## Context `src/App.jsx:5-21` eagerly imports all 20 pages, so every route ships in one bundle. The heaviest: `CampaignDetail.jsx` (2376 lines), `WikiArticle.jsx` (2115 lines — the **sole** consumer of `react-markdown`, imported at `WikiArticle.jsx:13`, which drags micromark/mdast into the main chunk), and `Admin.jsx` (1487 lines). There is no `React.lazy`/`Suspense` anywhere and no `manualChunks` in `vite.config.js`. ## Motivation A player opening the dashboard downloads the entire admin panel and the full markdown toolchain first. Route-level splitting is the single cheapest bundle win available and a prerequisite for reasonable PWA caching. ## Fix / Spec 1. Convert the page imports in `src/App.jsx` to `React.lazy(() => import(...))` and wrap the route outlet in a `<Suspense>` with a fallback (reuse the app's existing loading UI/spinner rather than inventing a new one). 2. Keep genuinely tiny/critical pages (e.g. `Login`) eager if it helps first paint — judgement call, document the choice. 3. Verify in the build output that `react-markdown`/micromark land only in the WikiArticle chunk (check `vite build` output or `rollup-plugin-visualizer` locally; do not commit the visualizer). 4. Record before/after `vite build` chunk sizes in the PR description. 5. Adjust the test harness if page tests need to await lazy resolution (`findBy*` instead of `getBy*`, or a Suspense-aware render helper). ## Acceptance criteria - [ ] Initial JS payload for the dashboard route drops substantially — state the numbers (before/after) in the PR. - [ ] `react-markdown` is absent from the entry chunk. - [ ] All page tests pass with lazy routes. - [ ] Navigating to every route works in a production build (`vite preview` smoke check). ## References - `src/App.jsx:5-21` - `src/pages/WikiArticle.jsx:13` (react-markdown import) - `vite.config.js` _Filed from the July 2026 full-project review._

claude-bot added the

enhancement

frontend

labels

2026-07-14 19:49:56 +00:00

claude-bot added this to the v3.5.0 - Frontend Platform & PWA milestone

2026-07-14 19:49:57 +00:00

claude-bot referenced this issue

2026-07-17 01:08:14 +00:00

fix(frontend): enforce real react-hooks lint and clear the warning backlog (#21) #180

claude-bot referenced this issue

2026-07-17 01:32:53 +00:00