NilsBriggen/cup26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Route-level code splitting for the heavy, less-trafficked pages

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Nils
2026-06-12 08:16:53 +02:00
parent b59a10eceb
commit 06e4835ad4
1 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router.tsx
+5 -9
View File
@@ -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 { RootLayout } from './app/RootLayout';
import { NotFound } from './app/NotFound'; import { NotFound } from './app/NotFound';
import { LivePage } from './features/live/LivePage'; import { LivePage } from './features/live/LivePage';
import { GroupsPage } from './features/groups/GroupsPage'; import { GroupsPage } from './features/groups/GroupsPage';
import { BracketPage } from './features/bracket/BracketPage'; import { BracketPage } from './features/bracket/BracketPage';
import { PredictionsPage } from './features/predictions/PredictionsPage'; import { PredictionsPage } from './features/predictions/PredictionsPage';
import { StoryPage } from './features/story/StoryPage';
import { MatchPreviewPage } from './features/match/MatchPreviewPage'; import { MatchPreviewPage } from './features/match/MatchPreviewPage';
import { TeamProfilePage } from './features/team/TeamProfilePage'; import { TeamProfilePage } from './features/team/TeamProfilePage';
import { MethodologyPage } from './features/methodology/MethodologyPage';
import { TeamsPage } from './features/teams/TeamsPage'; import { TeamsPage } from './features/teams/TeamsPage';
import { ScoreboardPage } from './features/scoreboard/ScoreboardPage'; import { ScoreboardPage } from './features/scoreboard/ScoreboardPage';
import { DataPage } from './features/data/DataPage';
import { ComparePage } from './features/compare/ComparePage';
const rootRoute = createRootRoute({ const rootRoute = createRootRoute({
component: RootLayout, component: RootLayout,
@@ -23,14 +19,14 @@ const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', com
const groupsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/groups', component: GroupsPage }); const groupsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/groups', component: GroupsPage });
const bracketRoute = createRoute({ getParentRoute: () => rootRoute, path: '/bracket', component: BracketPage }); const bracketRoute = createRoute({ getParentRoute: () => rootRoute, path: '/bracket', component: BracketPage });
const predictRoute = createRoute({ getParentRoute: () => rootRoute, path: '/predict', component: PredictionsPage }); 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 matchRoute = createRoute({ getParentRoute: () => rootRoute, path: '/match/$num', component: MatchPreviewPage });
const teamRoute = createRoute({ getParentRoute: () => rootRoute, path: '/team/$name', component: TeamProfilePage }); 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 teamsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/teams', component: TeamsPage });
const scoreboardRoute = createRoute({ getParentRoute: () => rootRoute, path: '/scoreboard', component: ScoreboardPage }); const scoreboardRoute = createRoute({ getParentRoute: () => rootRoute, path: '/scoreboard', component: ScoreboardPage });
const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: DataPage }); const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: lazyRouteComponent(() => import('./features/data/DataPage'), 'DataPage') });
const compareRoute = createRoute({ getParentRoute: () => rootRoute, path: '/compare', component: ComparePage }); 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]); const routeTree = rootRoute.addChildren([indexRoute, groupsRoute, bracketRoute, predictRoute, storyRoute, matchRoute, teamRoute, methodologyRoute, teamsRoute, scoreboardRoute, dataRoute, compareRoute]);