Evaluate options for route-based code splitting in UI apps (React Router + Vite) after testing/logic migration

[gidich]

Context

Our UI apps (apps/ui-community and apps/ui-staff) currently use classic React Router v6 declarative routing with static imports of modular route packages (@ocom/ui-community-route-* etc.) in App.tsx. There is no route-based code splitting configured:

• No React.lazy / Suspense
• No Data Router lazy prop
• Minimal vite.config.ts (no manualChunks, no build optimizations for splitting)

Vite is excellent at code-splitting dynamic import() calls, but we're not leveraging it for routes yet. The same pattern exists in the related Simnova/sharethrift repo.

Relevant article: https://javascriptpatterns.vercel.app/patterns/performance-patterns/route-based-splitting

Request

Hey Jason Moras,

Once you've completed the current testing and logic moves over, could you please look into this and evaluate the options below? Then recommend / choose the best path forward for our monorepo (balancing effort, performance gains, maintainability, and future needs like potential SSR).

Options to consider:

1. Quick win: React.lazy + Suspense on current <Routes> setup (lowest effort, immediate per-route chunks via Vite)
2. Recommended pragmatic step: Migrate to Data Router (createBrowserRouter) + native route.lazy prop (cleaner integration with loading states via useNavigation(), still relatively low-medium effort, excellent Vite code splitting)
3. Full Framework Mode (Vite plugin + route modules + react-router.config.ts + new entry points root.tsx / entry.client.tsx): Highest effort but automatic intelligent splitting, type-safe routes, loaders/actions, optional SSR/SSG, future-proof. Significant restructure of App.tsx and routing.
4. Alternative: TanStack Router (or TanStack Start) – often preferred in Vite community for superior DX and type safety. Would be a bigger migration but potentially best long-term.

Additional notes:

• Your existing modular route packages are a great foundation and can likely be leveraged/adapted in any approach.
• CellixJS already has a high-quality shared Rolldown setup for backend (@cellix/config-rolldown) – we can keep that untouched.
• Goal: Better initial load performance and bundle optimization for the growing UI apps.

Please review the current code in apps/ui-community/src/App.tsx, vite.config.ts, and the route packages, then propose the chosen direction (or a phased plan). Happy to provide more details or pair on a spike if needed.

Thanks!