From 06e4835ad4788f7373d52109de461a971fb8def3 Mon Sep 17 00:00:00 2001 From: Nils Briggen Date: Fri, 12 Jun 2026 08:16:53 +0200 Subject: [PATCH] Route-level code splitting for the heavy, less-trafficked pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Story, Methodology, Data and Compare load as their own chunks via lazyRouteComponent (prefetched on intent) — the main bundle drops ~10% and hot paths (Live, match, team) stay eager. Co-Authored-By: Claude Fable 5 --- src/router.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/router.tsx b/src/router.tsx index e4a8784..4e616fc 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,18 +1,14 @@ -import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router'; +import { createRootRoute, createRoute, createRouter, lazyRouteComponent } from '@tanstack/react-router'; import { RootLayout } from './app/RootLayout'; import { NotFound } from './app/NotFound'; import { LivePage } from './features/live/LivePage'; import { GroupsPage } from './features/groups/GroupsPage'; import { BracketPage } from './features/bracket/BracketPage'; import { PredictionsPage } from './features/predictions/PredictionsPage'; -import { StoryPage } from './features/story/StoryPage'; import { MatchPreviewPage } from './features/match/MatchPreviewPage'; import { TeamProfilePage } from './features/team/TeamProfilePage'; -import { MethodologyPage } from './features/methodology/MethodologyPage'; import { TeamsPage } from './features/teams/TeamsPage'; import { ScoreboardPage } from './features/scoreboard/ScoreboardPage'; -import { DataPage } from './features/data/DataPage'; -import { ComparePage } from './features/compare/ComparePage'; const rootRoute = createRootRoute({ component: RootLayout, @@ -23,14 +19,14 @@ const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', com const groupsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/groups', component: GroupsPage }); const bracketRoute = createRoute({ getParentRoute: () => rootRoute, path: '/bracket', component: BracketPage }); const predictRoute = createRoute({ getParentRoute: () => rootRoute, path: '/predict', component: PredictionsPage }); -const storyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/story', component: StoryPage }); +const storyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/story', component: lazyRouteComponent(() => import('./features/story/StoryPage'), 'StoryPage') }); const matchRoute = createRoute({ getParentRoute: () => rootRoute, path: '/match/$num', component: MatchPreviewPage }); const teamRoute = createRoute({ getParentRoute: () => rootRoute, path: '/team/$name', component: TeamProfilePage }); -const methodologyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/methodology', component: MethodologyPage }); +const methodologyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/methodology', component: lazyRouteComponent(() => import('./features/methodology/MethodologyPage'), 'MethodologyPage') }); const teamsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/teams', component: TeamsPage }); const scoreboardRoute = createRoute({ getParentRoute: () => rootRoute, path: '/scoreboard', component: ScoreboardPage }); -const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: DataPage }); -const compareRoute = createRoute({ getParentRoute: () => rootRoute, path: '/compare', component: ComparePage }); +const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: lazyRouteComponent(() => import('./features/data/DataPage'), 'DataPage') }); +const compareRoute = createRoute({ getParentRoute: () => rootRoute, path: '/compare', component: lazyRouteComponent(() => import('./features/compare/ComparePage'), 'ComparePage') }); const routeTree = rootRoute.addChildren([indexRoute, groupsRoute, bracketRoute, predictRoute, storyRoute, matchRoute, teamRoute, methodologyRoute, teamsRoute, scoreboardRoute, dataRoute, compareRoute]);