perf(frontend): route-based code splitting + vendor chunking

Splits each page into its own lazily-imported chunk via React.lazy
with Suspense fallback (a skeleton matching the dashboard layout
shape). Adds a vite manualChunks function that pushes heavy third-
party libraries into long-lived vendor chunks so page chunks stay
small and the vendor cache survives release cycles.

Vendor groupings: vendor-react, vendor-router, vendor-tanstack,
vendor-radix (+ cmdk), vendor-motion, vendor-recharts (+ d3 deps),
vendor-axios, vendor-state (zustand), vendor-toast (sonner),
vendor-lucide, vendor (everything else).

Build output (before -> after, gzipped):
  initial entry      348.65 kB -> 8.75 kB
  largest chunk      1163.97 kB -> 81.65 kB (vendor-recharts, only
                                 loaded on Dashboard + SystemHealth)
  build warning      "chunks > 500 kB" -> gone

DocumentsPage, SettingsPage, etc. no longer pull recharts into their
critical path; the dashboard pays the chart cost once, cached.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/app/router.tsx

@@ -1,30 +1,73 @@
+import { lazy, Suspense } from "react";
 import { createBrowserRouter, Navigate } from "react-router-dom";
 
 import { AppShell } from "@/layouts/AppShell";
-import { DashboardPage } from "@/pages/DashboardPage";
+import { Skeleton } from "@/components/ui/skeleton";
-import { DocumentsPage } from "@/pages/DocumentsPage";
+
-import { IngestionJobsPage } from "@/pages/IngestionJobsPage";
+// Each page is split into its own chunk so the initial bundle only ships the
-import { SearchPage } from "@/pages/SearchPage";
+// app shell + the page the user actually opens. Named exports are remapped to
-import { DocumentViewerPage } from "@/pages/DocumentViewerPage";
+// the `default` slot React.lazy expects.
-import { TablesFiguresPage } from "@/pages/TablesFiguresPage";
+const DashboardPage = lazy(() =>
-import { QualityControlPage } from "@/pages/QualityControlPage";
+  import("@/pages/DashboardPage").then((m) => ({ default: m.DashboardPage }))
-import { SystemHealthPage } from "@/pages/SystemHealthPage";
+);
-import { SettingsPage } from "@/pages/SettingsPage";
+const DocumentsPage = lazy(() =>
+  import("@/pages/DocumentsPage").then((m) => ({ default: m.DocumentsPage }))
+);
+const IngestionJobsPage = lazy(() =>
+  import("@/pages/IngestionJobsPage").then((m) => ({ default: m.IngestionJobsPage }))
+);
+const SearchPage = lazy(() =>
+  import("@/pages/SearchPage").then((m) => ({ default: m.SearchPage }))
+);
+const DocumentViewerPage = lazy(() =>
+  import("@/pages/DocumentViewerPage").then((m) => ({ default: m.DocumentViewerPage }))
+);
+const TablesFiguresPage = lazy(() =>
+  import("@/pages/TablesFiguresPage").then((m) => ({ default: m.TablesFiguresPage }))
+);
+const QualityControlPage = lazy(() =>
+  import("@/pages/QualityControlPage").then((m) => ({ default: m.QualityControlPage }))
+);
+const SystemHealthPage = lazy(() =>
+  import("@/pages/SystemHealthPage").then((m) => ({ default: m.SystemHealthPage }))
+);
+const SettingsPage = lazy(() =>
+  import("@/pages/SettingsPage").then((m) => ({ default: m.SettingsPage }))
+);
+
+function RouteFallback() {
+  return (
+    <div className="space-y-4 animate-in fade-in-0">
+      <Skeleton className="h-9 w-1/3" />
+      <Skeleton className="h-5 w-2/3" />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-28" />
+        ))}
+      </div>
+      <Skeleton className="h-72" />
+    </div>
+  );
+}
+
+function withSuspense(node: React.ReactNode) {
+  return <Suspense fallback={<RouteFallback />}>{node}</Suspense>;
+}
 
 export const router = createBrowserRouter([
   {
     element: <AppShell />,
     children: [
-      { path: "/", element: <DashboardPage /> },
+      { path: "/", element: withSuspense(<DashboardPage />) },
-      { path: "/documents", element: <DocumentsPage /> },
+      { path: "/documents", element: withSuspense(<DocumentsPage />) },
-      { path: "/ingestion", element: <IngestionJobsPage /> },
+      { path: "/ingestion", element: withSuspense(<IngestionJobsPage />) },
-      { path: "/search", element: <SearchPage /> },
+      { path: "/search", element: withSuspense(<SearchPage />) },
-      { path: "/viewer", element: <DocumentViewerPage /> },
+      { path: "/viewer", element: withSuspense(<DocumentViewerPage />) },
-      { path: "/viewer/:id", element: <DocumentViewerPage /> },
+      { path: "/viewer/:id", element: withSuspense(<DocumentViewerPage />) },
-      { path: "/tables-figures", element: <TablesFiguresPage /> },
+      { path: "/tables-figures", element: withSuspense(<TablesFiguresPage />) },
-      { path: "/quality", element: <QualityControlPage /> },
+      { path: "/quality", element: withSuspense(<QualityControlPage />) },
-      { path: "/health", element: <SystemHealthPage /> },
+      { path: "/health", element: withSuspense(<SystemHealthPage />) },
-      { path: "/settings", element: <SettingsPage /> },
+      { path: "/settings", element: withSuspense(<SettingsPage />) },
       { path: "*", element: <Navigate to="/" replace /> },
     ],
   },

frontend/vite.config.ts

@@ -22,5 +22,32 @@ export default defineConfig({
   build: {
     outDir: "dist",
     sourcemap: true,
+    chunkSizeWarningLimit: 800,
+    rollupOptions: {
+      output: {
+        // Split heavy third-party libs into their own long-lived chunks so
+        // page-level chunks stay small and the vendor cache is reused across
+        // releases.
+        manualChunks: (id) => {
+          if (!id.includes("node_modules")) return undefined;
+          if (id.includes("recharts") || id.includes("d3-")) return "vendor-recharts";
+          if (id.includes("framer-motion")) return "vendor-motion";
+          if (id.includes("@radix-ui") || id.includes("cmdk")) return "vendor-radix";
+          if (id.includes("@tanstack")) return "vendor-tanstack";
+          if (id.includes("react-router")) return "vendor-router";
+          if (id.includes("axios")) return "vendor-axios";
+          if (id.includes("lucide-react")) return "vendor-lucide";
+          if (id.includes("zustand")) return "vendor-state";
+          if (id.includes("sonner")) return "vendor-toast";
+          if (
+            id.includes("react/") ||
+            id.includes("react-dom") ||
+            id.includes("scheduler")
+          )
+            return "vendor-react";
+          return "vendor";
+        },
+      },
+    },
   },
 });