Implement route-based code splitting with React.lazy #5

New issue

Closed

opened 2026-05-15 05:07:31 +00:00 by Mark · 0 comments

Mark commented

2026-05-15 05:07:31 +00:00

Owner

All pages are eagerly imported in src/App.tsx, loading the entire app upfront. Implement React.lazy() + Suspense for each route to reduce initial bundle size.

Routes to split:

/people → src/pages/People.tsx
/people/:id → src/pages/PersonDetail.tsx
/log → src/pages/LogInteraction.tsx
/dates → src/pages/Dates.tsx
/settings → src/pages/Settings.tsx

Add a loading fallback (e.g., src/components/Loading.tsx with a spinner).

File to modify: src/App.tsx

All pages are eagerly imported in `src/App.tsx`, loading the entire app upfront. Implement `React.lazy()` + `Suspense` for each route to reduce initial bundle size. Routes to split: - `/people` → `src/pages/People.tsx` - `/people/:id` → `src/pages/PersonDetail.tsx` - `/log` → `src/pages/LogInteraction.tsx` - `/dates` → `src/pages/Dates.tsx` - `/settings` → `src/pages/Settings.tsx` Add a loading fallback (e.g., `src/components/Loading.tsx` with a spinner). File to modify: `src/App.tsx`