Implement lazy loading for route components#641
Open
mhsnook wants to merge 3 commits into
Open
Conversation
Pure-component routes were renamed to *.lazy.tsx using createLazyFileRoute
so only the route stub is in the eager bundle. Routes that also have
config (loader / beforeLoad / validateSearch) were split into foo.tsx
(keeping only the config) and foo.lazy.tsx (component, pendingComponent,
errorComponent). The eager-side import graph is now thinner — no
component-side UI lives in main.
The lazy file's Route is a LazyRoute and doesn't expose .fullPath; the
existing Route.fullPath hints used for type narrowing of absolute Links
were dropped since they were typing aids, not runtime behavior. $lang
Links/Navigates that lost from-inference get explicit params={{ lang }}.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
TypeScript type checkBefore: 0 error(s) → After: 0 error(s) (no change) |
Lint (oxlint + eslint)Before: 11 issue(s) → After: 11 issue(s) (+2 new, −2 resolved) New (2): Resolved (2): |
Main bundle size
|
Writes dist/stats.html on every `pnpm build` so we can see what's actually in each chunk (used this to diagnose the 1MB main bundle: react-dom + Supabase createClient + TanStack core are the bulk, not route components).
ScenetestScenes: 98/98 completed · Assertions: 0/0 passed · Console errors: 0 · Duration: 341734ms All scenes passed ✅ |
Extracts each feature's queryKey + queryFn into a small queries.ts file
that doesn't depend on @tanstack/db. Route loaders now call
queryClient.ensureQueryData / prefetchQuery against the same query keys
the collections use. When the lazy collection chunk later loads, its
queryFn finds data already in the React Query cache and skips the fetch.
Also:
* clear-user.ts and auth-context.tsx use dynamic import() for
collections — signed-out visitors no longer pay the DB weight.
* test-runtime-helpers.ts moved its collection imports inside a
dynamic-import block — the dev/test E2E exposure now only loads
in DEV builds (the if (import.meta.env.DEV) block tree-shakes
in prod).
* SidebarProvider moved from __root.tsx into _user.lazy.tsx. Sidebar
primitives + @base-ui + @floating-ui + tabbable no longer eager
for the homepage / auth pages.
* Toasters in __root.tsx is now React.lazy. lib/utils.ts breaks the
sonner import chain by dynamic-importing toast functions inside
copyLink. The two route loaders that called toastNeutral /
ensureManifestCardsInCollection now dynamic-import on the spot.
* Drop tailwind-merge; cn() is just clsx (Tailwind v4's cascade
ordering handles utility conflicts correctly).
Bundle:
index.js raw: 1,073,940 → 630,343 bytes (−41.3%)
index.js gzipped: 321,010 → 185,760 bytes (−42.1%)
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
2 participants
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
This PR refactors the routing architecture to implement lazy loading for route components using TanStack Router's
createLazyFileRoute. This improves initial page load performance by code-splitting route components and only loading them when needed.Key Changes
Route Component Splitting: Created
.lazy.tsxvariants for major route components that contain the actual component logic, while the original.tsxfiles now only contain route configuration with minimal importswelcome.lazy.tsx,browse.index.lazy.tsx,learn/$lang.bulk-add.lazy.tsx,learn/$lang.review.index.lazy.tsx, and many othersLazy Route Registration: Updated route files to use
createLazyFileRouteinstead ofcreateFileRoute, enabling automatic code-splitting and lazy loading of componentsRoute Tree Generation: Updated
routeTree.gen.tsto reflect the new lazy-loaded route structure, removing imports for routes that are now lazy-loadedLayout Routes: Converted layout/wrapper routes to lazy loading where appropriate (e.g.,
_user.lazy.tsx,_auth.lazy.tsx,friends.lazy.tsx)Minimal Route Files: Route configuration files now contain only the route definition and necessary validation schemas, with all UI logic moved to
.lazy.tsxfilesImplementation Details
routeTree.gen.tsfile was updated to remove imports for lazy-loaded routes, reducing the initial bundle sizecreateLazyFileRoutewith the same route path as their corresponding main route filehttps://claude.ai/code/session_01FXH8vJoCT4483fb3sizE6C