Split every non-critical route with React.lazy() (#421) - #474
Merged
Conversation
router.tsx statically imported all ~30 screens, so the entry chunk carried every screen whether or not a visit ever reached it (1,828.77 kB raw / 502.48 kB gzip). Only the four auth pages and the dashboard stay eager now; everything else loads behind a single Suspense boundary with a skeleton fallback. Entry chunk is down to 949.90 kB raw / 295.16 kB gzip. Adds a CI budget check (400 KB gzip) on the entry chunk so a future regression fails the build instead of silently regrowing it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q44qCG1TEkZxDo9cb9voYT
CI's function-coverage gate dropped to 79.97% after #421: each route's React.lazy(() => import(...).then(...)) adds two callbacks that only run when a test navigates to that specific route, so router.tsx's own function coverage just tracks how many of ~26 routes a test visited, not whether the route table is correct. That's already covered by titleCoverage.test.ts and visualCoverage.test.ts, which parse this file's source directly, and the screens it wires up carry their own coverage. Same treatment as main.tsx, already excluded for the same reason. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q44qCG1TEkZxDo9cb9voYT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
router.tsxstatically imported all ~30 screens, so the entry chunk carried every screen a visit could reach whether or not it did: 1,828.77 kB raw / 502.48 kB gzip.React.lazy(), wrapped in a single<Suspense>with a skeleton-basedRouteLoadingFallback(this design system uses skeletons, not spinners, for top-level loading states).scripts/bundle-size-budget.mjs, wired into thefrontend-bundle-auditCI job, failing the build if the entry chunk exceeds 400 KB gzip (measured floor ~288-295 KB, budget leaves headroom for legitimate growth in the still-eager pages).titleCoverage.test.ts's router-source parser now also recognizes theconst X = lazy(() => import(...))shape, not just static imports.Test plan
npm run typecheck,npm run lint,npm run i18n:checkall cleannpx vitest run: 240 files / 2670 tests passnode tools/em-dash/lint.mjs --base origin/main: cleantitleCoverage.test.tslazy-import regex (removed it, confirmed the same 2 tests fail with "could not find a source file", restored)npm run buildand served withvite preview; verified in a real browser that/loginloads with no console errors and the entry chunk (index-B0zo_VGF.js) fetches with a 200🤖 Generated with Claude Code
https://claude.ai/code/session_01Q44qCG1TEkZxDo9cb9voYT