diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 096bd57..c251b9b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,39 +1,63 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, Suspense, lazy } from 'react';
import { Routes, Route, Link, useLocation, Navigate, useParams, useNavigate } from 'react-router-dom';
import { clsx } from 'clsx';
-import SearchDashboard from './components/SearchDashboard';
-import Dashboard from './components/Dashboard';
-import ApplicationList from './components/ApplicationList';
-import ApplicationInfo from './components/ApplicationInfo';
-import GovernanceModelHelper from './components/GovernanceModelHelper';
-import TeamDashboard from './components/TeamDashboard';
-import ConfigurationV25 from './components/ConfigurationV25';
-import ReportsDashboard from './components/ReportsDashboard';
-import GovernanceAnalysis from './components/GovernanceAnalysis';
-import TechnicalDebtHeatmap from './components/TechnicalDebtHeatmap';
-import LifecyclePipeline from './components/LifecyclePipeline';
-import DataCompletenessScore from './components/DataCompletenessScore';
-import ZiRADomainCoverage from './components/ZiRADomainCoverage';
-import FTEPerZiRADomain from './components/FTEPerZiRADomain';
-import ComplexityDynamicsBubbleChart from './components/ComplexityDynamicsBubbleChart';
-import FTECalculator from './components/FTECalculator';
-import DataCompletenessConfig from './components/DataCompletenessConfig';
-import BIASyncDashboard from './components/BIASyncDashboard';
-import BusinessImportanceComparison from './components/BusinessImportanceComparison';
-import DataValidationDashboard from './components/DataValidationDashboard';
-import SchemaConfigurationSettings from './components/SchemaConfigurationSettings';
-import ArchitectureDebugPage from './components/ArchitectureDebugPage';
-import Login from './components/Login';
-import ForgotPassword from './components/ForgotPassword';
-import ResetPassword from './components/ResetPassword';
-import AcceptInvitation from './components/AcceptInvitation';
import ProtectedRoute from './components/ProtectedRoute';
-import UserManagement from './components/UserManagement';
-import RoleManagement from './components/RoleManagement';
-import ProfileSettings from './components/ProfileSettings';
import { ToastContainerComponent } from './components/Toast';
import { useAuthStore } from './stores/authStore';
+// Core components (loaded immediately - used on main routes)
+const SearchDashboard = lazy(() => import('./components/SearchDashboard'));
+const Dashboard = lazy(() => import('./components/Dashboard'));
+const ApplicationList = lazy(() => import('./components/ApplicationList'));
+const ApplicationInfo = lazy(() => import('./components/ApplicationInfo'));
+const GovernanceModelHelper = lazy(() => import('./components/GovernanceModelHelper'));
+
+// Reports components (code-split into reports chunk)
+const ReportsDashboard = lazy(() => import('./components/ReportsDashboard'));
+const TeamDashboard = lazy(() => import('./components/TeamDashboard'));
+const GovernanceAnalysis = lazy(() => import('./components/GovernanceAnalysis'));
+const TechnicalDebtHeatmap = lazy(() => import('./components/TechnicalDebtHeatmap'));
+const LifecyclePipeline = lazy(() => import('./components/LifecyclePipeline'));
+const DataCompletenessScore = lazy(() => import('./components/DataCompletenessScore'));
+const ZiRADomainCoverage = lazy(() => import('./components/ZiRADomainCoverage'));
+const FTEPerZiRADomain = lazy(() => import('./components/FTEPerZiRADomain'));
+const ComplexityDynamicsBubbleChart = lazy(() => import('./components/ComplexityDynamicsBubbleChart'));
+const BusinessImportanceComparison = lazy(() => import('./components/BusinessImportanceComparison'));
+
+// Apps components (code-split into apps chunk)
+const BIASyncDashboard = lazy(() => import('./components/BIASyncDashboard'));
+const FTECalculator = lazy(() => import('./components/FTECalculator'));
+
+// Settings components (code-split into settings chunk)
+const ConfigurationV25 = lazy(() => import('./components/ConfigurationV25'));
+const DataCompletenessConfig = lazy(() => import('./components/DataCompletenessConfig'));
+const SchemaConfigurationSettings = lazy(() => import('./components/SchemaConfigurationSettings'));
+const DataValidationDashboard = lazy(() => import('./components/DataValidationDashboard'));
+const ProfileSettings = lazy(() => import('./components/ProfileSettings'));
+
+// Admin components (code-split into admin chunk)
+const UserManagement = lazy(() => import('./components/UserManagement'));
+const RoleManagement = lazy(() => import('./components/RoleManagement'));
+const ArchitectureDebugPage = lazy(() => import('./components/ArchitectureDebugPage'));
+
+// Auth components (code-split into auth chunk - loaded separately since they're outside main layout)
+const Login = lazy(() => import('./components/Login'));
+const ForgotPassword = lazy(() => import('./components/ForgotPassword'));
+const ResetPassword = lazy(() => import('./components/ResetPassword'));
+const AcceptInvitation = lazy(() => import('./components/AcceptInvitation'));
+
+// Loading component for Suspense fallback
+function LoadingFallback() {
+ return (
+
+ );
+}
+
// Module-level singleton to prevent duplicate initialization across StrictMode remounts
let initializationPromise: Promise | null = null;
@@ -354,61 +378,63 @@ function AppContent() {
{/* Main content */}
-
- {/* Main Dashboard (Search) */}
- } />
-
- {/* Application routes (new structure) - specific routes first, then dynamic */}
- } />
- } />
- } />
-
- {/* Application Component routes */}
- } />
-
- {/* Reports routes */}
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
- {/* Apps routes */}
- } />
- } />
-
- {/* Settings routes */}
- } />
- } />
- } />
- } />
- } />
- } />
- {/* Legacy redirects for old routes */}
- } />
-
- {/* Admin routes */}
- } />
- } />
- } />
-
- {/* Legacy redirects for bookmarks - redirect old paths to new ones */}
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
+ }>
+
+ {/* Main Dashboard (Search) */}
+ } />
+
+ {/* Application routes (new structure) - specific routes first, then dynamic */}
+ } />
+ } />
+ } />
+
+ {/* Application Component routes */}
+ } />
+
+ {/* Reports routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* Apps routes */}
+ } />
+ } />
+
+ {/* Settings routes */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ {/* Legacy redirects for old routes */}
+ } />
+
+ {/* Admin routes */}
+ } />
+ } />
+ } />
+
+ {/* Legacy redirects for bookmarks - redirect old paths to new ones */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
);
@@ -539,12 +565,14 @@ function App() {
// If on an auth route, render it directly (no layout) - don't wait for config
if (isAuthRoute) {
return (
-
- } />
- } />
- } />
- } />
-
+ }>
+
+ } />
+ } />
+ } />
+ } />
+
+
);
}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 7c93fa7..8bbaebb 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -9,6 +9,53 @@ export default defineConfig({
'@': path.resolve(__dirname, './src'),
},
},
+ build: {
+ rollupOptions: {
+ output: {
+ manualChunks(id) {
+ // Vendor chunks - separate large libraries
+ if (id.includes('node_modules')) {
+ if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
+ return 'react-vendor';
+ }
+ if (id.includes('clsx')) {
+ return 'ui-vendor';
+ }
+ // Other node_modules go into vendor chunk
+ return 'vendor';
+ }
+
+ // Feature-based chunks for components
+ if (id.includes('/components/')) {
+ if (id.includes('ReportsDashboard') || id.includes('TeamDashboard') ||
+ id.includes('GovernanceAnalysis') || id.includes('TechnicalDebtHeatmap') ||
+ id.includes('LifecyclePipeline') || id.includes('DataCompletenessScore') ||
+ id.includes('ZiRADomainCoverage') || id.includes('FTEPerZiRADomain') ||
+ id.includes('ComplexityDynamicsBubbleChart') || id.includes('BusinessImportanceComparison')) {
+ return 'reports';
+ }
+ if (id.includes('ConfigurationV25') || id.includes('DataCompletenessConfig') ||
+ id.includes('SchemaConfigurationSettings') || id.includes('DataValidationDashboard') ||
+ id.includes('ProfileSettings')) {
+ return 'settings';
+ }
+ if (id.includes('UserManagement') || id.includes('RoleManagement') ||
+ id.includes('ArchitectureDebugPage')) {
+ return 'admin';
+ }
+ if (id.includes('BIASyncDashboard') || id.includes('FTECalculator')) {
+ return 'apps';
+ }
+ if (id.includes('Login') || id.includes('ForgotPassword') ||
+ id.includes('ResetPassword') || id.includes('AcceptInvitation')) {
+ return 'auth';
+ }
+ }
+ },
+ },
+ },
+ chunkSizeWarningLimit: 600, // Increase limit slightly since we're code-splitting
+ },
server: {
port: 5173,
proxy: {