Skip to content

perf: enable route-level code splitting#298

Merged
henrique221 merged 2 commits into
mainfrom
feat/route-code-splitting
Jun 9, 2026
Merged

perf: enable route-level code splitting#298
henrique221 merged 2 commits into
mainfrom
feat/route-code-splitting

Conversation

@henrique221

Copy link
Copy Markdown
Contributor

What

Enables TanStack Router autoCodeSplitting so each route's component ships as its own lazy chunk instead of one monolithic bundle, plus defaultPreload: 'intent' so a route's chunk is prefetched on link hover/focus — code-splitting without adding navigation latency on first visit.

Closes #293.

Measured (per the ticket's "measure before/after" guardrail)

Real vite build numbers:

Before After
Entry/app chunk 613.59 kB 84.03 kB
Login page initial JS (raw) ~892 kB ~608 kB
Login page initial JS (gzip) ~280 kB ~203 kB
Chunks 7 43

Heavy feature code is now demand-loaded, not in the initial bundle: DraftingPage (49 kB), project detail (33 kB), projects (19 kB), resources/select (31 kB), export, users, legal, etc. A user who never opens the drafting editor never downloads TipTap.

Verified at runtime (production build, real browser)

  • Login page loads clean (the only console error is a session probe to a dummy auth host used for local verification — gone in real envs).
  • Lazy-loading works: navigating to /legal/privacy fetched the legal + privacy chunks on demand (not present in the initial load) and rendered correctly — no blank screen, no broken Suspense.

Notes

  • routeTree.gen.ts is intentionally unchanged — this @tanstack/router-plugin version splits route components via a build-time transform, not by rewriting the generated tree. Diff is just the two config lines.
  • Follow-up opportunity (not in this PR): the App Insights SDK is a 221 kB (76 kB gzip) chunk loaded eagerly at startup (logger). Deferring/lazy-initializing it would cut ~76 kB gzip from every page's initial load — bigger than this change. Worth a separate ticket; kept out here to stay focused and avoid premature scope.

Turn on TanStack Router autoCodeSplitting so each route's component ships
as its own lazy chunk instead of one monolithic bundle, and set
defaultPreload: 'intent' so a route's chunk is prefetched on link
hover/focus (no navigation latency on first visit).

Measured (vite build):
- entry chunk: 613.59 kB -> 84.03 kB
- login page initial JS: ~892 kB -> ~608 kB raw (~280 -> ~203 kB gzip)
- heavy feature code now demand-loaded: DraftingPage (49 kB), project
  detail (33 kB), projects (19 kB), resources, export, etc.

routeTree.gen.ts is unchanged - this plugin version splits via a
build-time transform, not by rewriting the generated tree.

Closes #293
@henrique221 henrique221 added enhancement New feature or request web-app labels Jun 8, 2026
@henrique221 henrique221 requested a review from Copilot June 8, 2026 21:15
@henrique221 henrique221 self-assigned this Jun 8, 2026
@henrique221 henrique221 requested a review from kaseywright June 8, 2026 21:15

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR enables TanStack Router’s automatic route-level code splitting in the Vite build and configures the router to preload split route chunks on user intent (hover/focus), reducing initial bundle size while keeping navigation responsive.

Changes:

  • Enable autoCodeSplitting: true in @tanstack/router-plugin/vite.
  • Set defaultPreload: 'intent' on the router to preload route chunks on link hover/focus.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
vite.config.ts Enables TanStack Router automatic route-level code splitting at build time.
src/lib/router.ts Configures default preload strategy (intent) to reduce perceived navigation latency with split chunks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@henrique221

Copy link
Copy Markdown
Contributor Author

@kaseywright I just requested a Copilot review. I will wait for it and then I will ask for your review on this PR again

@henrique221 henrique221 requested review from kaseywright and removed request for kaseywright June 8, 2026 21:18
@henrique221 henrique221 enabled auto-merge (squash) June 9, 2026 14:13
@henrique221 henrique221 merged commit ac84a89 into main Jun 9, 2026
1 check passed
@github-actions github-actions Bot deleted the feat/route-code-splitting branch June 9, 2026 14:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request web-app

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enable route-level code splitting

3 participants