Improve frontend performance with route-level code splitting

Author: fuzziecoder

App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import {
   BrowserRouter,
   Routes,
@@ -11,59 +11,67 @@ import { NotificationsProvider } from "./contexts/NotificationsContext";
 import { ChatProvider } from "./contexts/ChatContext";
 import { PaymentProvider } from "./contexts/PaymentContext";
 
-import SplashPage from "./pages/SplashPage";
-import LoginPage from "./pages/LoginPage";
-import HomePage from "./pages/HomePage";
-import PaymentPage from "./pages/PaymentPage";
-import HistoryPage from "./pages/HistoryPage";
-import NotificationsPage from "./pages/NotificationsPage";
-import ProfilePage from "./pages/ProfilePage";
-import ChatPage from "./pages/ChatPage";
-import DrinksPage from "./pages/DrinksPage";
+const SplashPage = lazy(() => import("./pages/SplashPage"));
+const LoginPage = lazy(() => import("./pages/LoginPage"));
+const HomePage = lazy(() => import("./pages/HomePage"));
+const PaymentPage = lazy(() => import("./pages/PaymentPage"));
+const HistoryPage = lazy(() => import("./pages/HistoryPage"));
+const NotificationsPage = lazy(() => import("./pages/NotificationsPage"));
+const ProfilePage = lazy(() => import("./pages/ProfilePage"));
+const ChatPage = lazy(() => import("./pages/ChatPage"));
+const DrinksPage = lazy(() => import("./pages/DrinksPage"));
 
-import DashboardLayout from "./components/layout/DashboardLayout";
-import ProtectedRoute from "./components/auth/ProtectedRoute";
-import TargetCursor from "./components/common/TargetCursor";
+const DashboardLayout = lazy(() => import("./components/layout/DashboardLayout"));
+const ProtectedRoute = lazy(() => import("./components/auth/ProtectedRoute"));
+const TargetCursor = lazy(() => import("./components/common/TargetCursor"));
+
+const RouteFallback: React.FC = () => (
+  <div className="min-h-screen flex items-center justify-center bg-[#1a1a1a] text-white">
+    Loading...
+  </div>
+);
 
 const App: React.FC = () => {
   return (
     <AuthProvider>
       <NotificationsProvider>
         <PaymentProvider>
           <ChatProvider>
-            <TargetCursor
-              spinDuration={2}
-              hideDefaultCursor
-              parallaxOn
-              hoverDuration={0.2}
-            />
-            <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<SplashPage />} />
-                <Route path="/login" element={<LoginPage />} />
+            <Suspense fallback={<RouteFallback />}>
+              <TargetCursor
+                spinDuration={2}
+                hideDefaultCursor
+                parallaxOn
+                hoverDuration={0.2}
+              />
+              <BrowserRouter>
+                <Routes>
+                  <Route path="/" element={<SplashPage />} />
+                  <Route path="/login" element={<LoginPage />} />
 
-                <Route
-                  path="/dashboard"
-                  element={
-                    <ProtectedRoute>
-                      <DashboardLayout />
-                    </ProtectedRoute>
-                  }
-                >
-                  <Route index element={<Navigate to="home" replace />} />
-                  <Route path="home" element={<HomePage />} />
-                  <Route path="payment" element={<PaymentPage />} />
-                  <Route path="drinks" element={<DrinksPage />} />
-                  <Route path="history" element={<HistoryPage />} />
-                  <Route path="notifications" element={<NotificationsPage />} />
-                  <Route path="chat" element={<ChatPage />} />
-                  <Route path="profile" element={<ProfilePage />} />
-                  <Route path="profile/:userId" element={<ProfilePage />} />
-                </Route>
+                  <Route
+                    path="/dashboard"
+                    element={
+                      <ProtectedRoute>
+                        <DashboardLayout />
+                      </ProtectedRoute>
+                    }
+                  >
+                    <Route index element={<Navigate to="home" replace />} />
+                    <Route path="home" element={<HomePage />} />
+                    <Route path="payment" element={<PaymentPage />} />
+                    <Route path="drinks" element={<DrinksPage />} />
+                    <Route path="history" element={<HistoryPage />} />
+                    <Route path="notifications" element={<NotificationsPage />} />
+                    <Route path="chat" element={<ChatPage />} />
+                    <Route path="profile" element={<ProfilePage />} />
+                    <Route path="profile/:userId" element={<ProfilePage />} />
+                  </Route>
 
-                <Route path="*" element={<Navigate to="/" />} />
-              </Routes>
-            </BrowserRouter>
+                  <Route path="*" element={<Navigate to="/" />} />
+                </Routes>
+              </BrowserRouter>
+            </Suspense>
           </ChatProvider>
         </PaymentProvider>
       </NotificationsProvider>

ISSUE_BUNDLE_SIZE.md

@@ -0,0 +1,19 @@
+# Issue: App ships as a single ~1MB JS bundle
+
+## Summary
+`npm run build` showed the main JavaScript bundle was ~981kB minified, which slows initial page load on mobile networks and lower-end devices.
+
+## Impact
+- Slower first contentful paint and interaction readiness.
+- Higher data usage for users.
+- Poor scalability as more features are added.
+
+## Root cause
+`App.tsx` eagerly imported all route pages and shared UI modules, so Vite emitted one large entry chunk.
+
+## Resolution in this PR
+- Added route-level lazy loading with `React.lazy` and `Suspense` for all pages and dashboard components.
+- Added a lightweight loading fallback while split chunks load.
+
+## Validation
+After the fix, `npm run build` emits multiple chunks and the main application entry (`index-*.js`) drops from ~981kB to ~70kB, with code split across route chunks.