perf: bundle optimization with code splitting and vendor chunking (#4709)

## Summary

- **Route-level code splitting**: Lazy-load 5 pages (CatalogPage,
LegalPage, McpPage, InteractivePage, DebugPage) via React Router
`lazy()`
- **PrismLight**: Switch from full Prism (37+ languages) to
`prism-light` with only Python registered, removing ~36 unused language
grammars
- **Vendor chunk splitting**: Split React/MUI into separate cached
chunks via `manualChunks` — users only re-download app code on updates
- **API preconnect**: Add `<link rel="preconnect">` for `api.pyplots.ai`
to reduce initial API latency

### Build output (before → after)

| Chunk | Size | Gzipped |
|-------|------|---------|
| `vendor-*.js` | 98 KB | 33 KB |
| `mui-*.js` | 320 KB | 99 KB |
| `index-*.js` | 344 KB | 108 KB |
| Lazy pages | 3-11 KB each | 1-3 KB each |

Main bundle reduced from ~1.3 MB to 344 KB with vendor/MUI cached
separately.

## Test plan

- [x] `yarn build` succeeds with expected chunk split
- [x] All 44 tests pass
- [ ] Verify syntax highlighting works on spec pages (Code tab)
- [ ] Verify lazy-loaded pages load correctly (catalog, legal, mcp,
debug, interactive)

Closes #4704

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

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

@@ -1,34 +1,37 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 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 LazyFallback = () => (
+  <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+    <CircularProgress size={32} />
+  </Box>
+);
+
 const router = createBrowserRouter([
   {
     path: '/',
     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, HydrateFallback: LazyFallback })) },
+      { path: 'legal', lazy: () => import('./pages/LegalPage').then(m => ({ Component: m.LegalPage, HydrateFallback: LazyFallback })) },
+      { path: 'mcp', lazy: () => import('./pages/McpPage').then(m => ({ Component: m.McpPage, HydrateFallback: LazyFallback })) },
       { 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, HydrateFallback: LazyFallback })) },
   // Hidden debug dashboard (outside Layout - no header/footer)
-  { path: 'debug', element: <DebugPage /> },
+  { path: 'debug', lazy: () => import('./pages/DebugPage').then(m => ({ Component: m.DebugPage, HydrateFallback: LazyFallback })) },
   { path: '*', element: <NotFoundPage /> },
 ]);
 

app/vite.config.ts

@@ -11,4 +11,14 @@ export default defineConfig({
     port: 3000,
     host: true,
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/@mui/')) return 'mui';
+          if (id.includes('node_modules/react/') || id.includes('node_modules/react-dom/') || id.includes('node_modules/react-router-dom/')) return 'vendor';
+        },
+      },
+    },
+  },
 });