[PERF] Implement React.lazy() code splitting for security panels and page components

[Prathvikmehra]

Description

The MedTrack frontend eagerly imports all 39 security panel components plus all public pages in AppRoutes.jsx and App.jsx via static imports. Every user downloads the entire bundle (~2MB+) on first load, even though technician users never access security panels, supplier users never access them, and hospital users rarely use more than 2-3 of the 39 panels. Landing page visitors download the entire app bundle.

Proposed Solution

Replace all 39 static imports with React.lazy():

// BEFORE
import CspmPanel from './pages/auth/CspmPage';

// AFTER
const CspmPanel = React.lazy(() => import('./pages/auth/CspmPage'));

Implementation Steps

1. Create src/components/common/PageLoader.jsx as a shared loading fallback
2. Wrap AppRoutes render with Suspense at route group level
3. Create grouped Suspense boundaries: public pages, auth forms, hospital, technician, supplier, security panels
4. Verify all 14+ route aliases still work correctly
5. Ensure ProtectedRoute works correctly with lazy-loaded components
6. Add webpack-bundle-analyzer to visualize bundle size reduction

Files

• src/routes/AppRoutes.jsx
• src/App.jsx
• src/components/common/PageLoader.jsx (new)
• package.json (add dev dependency)

Expected Impact

• ~60% reduction in initial JS bundle size (from ~2MB to ~800KB)
• Faster time-to-interactive for technician and supplier users
• Improved Lighthouse performance score
• Better mobile user experience on slow networks

Difficulty

Medium