perf: route-level code splitting, PrismLight, vendor chunk splitting, API preconnect

- Lazy-load CatalogPage, LegalPage, McpPage, InteractivePage, DebugPage
- Switch react-syntax-highlighter to PrismLight with only Python grammar
- Add manualChunks to split vendor (React) and MUI into separate cached chunks
- Add preconnect hint for api.pyplots.ai

Closes #4704

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: MarkusNeusinger

app/index.html

@@ -23,6 +23,8 @@
     <meta name="twitter:image" content="https://pyplots.ai/og-image.png" />
     <!-- Preconnect to GCS for font loading -->
     <link rel="preconnect" href="https://storage.googleapis.com" crossorigin>
+    <!-- Preconnect to API for faster first request -->
+    <link rel="preconnect" href="https://api.pyplots.ai" crossorigin>
 
     <!-- Preload MonoLisa Basic Latin (most used, variable font = all weights) -->
     <link rel="preload" href="https://storage.googleapis.com/pyplots-static/fonts/0-MonoLisa-normal.woff2" as="font" type="font/woff2" crossorigin>

app/src/components/SpecTabs.tsx

@@ -15,8 +15,11 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+
+SyntaxHighlighter.registerLanguage('python', python);
 
 // Map tag category names to URL parameter names
 const SPEC_TAG_PARAM_MAP: Record<string, string> = {

app/src/router.tsx

@@ -4,11 +4,6 @@ import { Layout, AppDataProvider } from './components/Layout';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { HomePage } from './pages/HomePage';
 import { SpecPage } from './pages/SpecPage';
-import { CatalogPage } from './pages/CatalogPage';
-import { InteractivePage } from './pages/InteractivePage';
-import { DebugPage } from './pages/DebugPage';
-import { LegalPage } from './pages/LegalPage';
-import { McpPage } from './pages/McpPage';
 import { NotFoundPage } from './pages/NotFoundPage';
 
 const router = createBrowserRouter([
@@ -17,18 +12,18 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'catalog', element: <CatalogPage /> },
-      { path: 'legal', element: <LegalPage /> },
-      { path: 'mcp', element: <McpPage /> },
+      { path: 'catalog', lazy: () => import('./pages/CatalogPage').then(m => ({ Component: m.CatalogPage })) },
+      { path: 'legal', lazy: () => import('./pages/LegalPage').then(m => ({ Component: m.LegalPage })) },
+      { path: 'mcp', lazy: () => import('./pages/McpPage').then(m => ({ Component: m.McpPage })) },
       { path: ':specId', element: <SpecPage /> },
       { path: ':specId/:library', element: <SpecPage /> },
       { path: '*', element: <NotFoundPage /> },
     ],
   },
   // Fullscreen interactive view (outside Layout but inside AppDataProvider)
-  { path: 'interactive/:specId/:library', element: <InteractivePage /> },
+  { path: 'interactive/:specId/:library', lazy: () => import('./pages/InteractivePage').then(m => ({ Component: m.InteractivePage })) },
   // Hidden debug dashboard (outside Layout - no header/footer)
-  { path: 'debug', element: <DebugPage /> },
+  { path: 'debug', lazy: () => import('./pages/DebugPage').then(m => ({ Component: m.DebugPage })) },
   { path: '*', element: <NotFoundPage /> },
 ]);
 

app/vite.config.ts

@@ -11,4 +11,14 @@ export default defineConfig({
     port: 3000,
     host: true,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+          mui: ['@mui/material', '@mui/icons-material'],
+        },
+      },
+    },
+  },
 });