Skip to content

Commit 3ce7d23

Browse files
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>
1 parent 393f243 commit 3ce7d23

4 files changed

Lines changed: 21 additions & 11 deletions

File tree

app/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
<meta name="twitter:image" content="https://pyplots.ai/og-image.png" />
2424
<!-- Preconnect to GCS for font loading -->
2525
<link rel="preconnect" href="https://storage.googleapis.com" crossorigin>
26+
<!-- Preconnect to API for faster first request -->
27+
<link rel="preconnect" href="https://api.pyplots.ai" crossorigin>
2628

2729
<!-- Preload MonoLisa Basic Latin (most used, variable font = all weights) -->
2830
<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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,11 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
1515
import CheckIcon from '@mui/icons-material/Check';
1616
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1717
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
18-
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
18+
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
1919
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
20+
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
21+
22+
SyntaxHighlighter.registerLanguage('python', python);
2023

2124
// Map tag category names to URL parameter names
2225
const SPEC_TAG_PARAM_MAP: Record<string, string> = {

app/src/router.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ import { Layout, AppDataProvider } from './components/Layout';
44
import { ErrorBoundary } from './components/ErrorBoundary';
55
import { HomePage } from './pages/HomePage';
66
import { SpecPage } from './pages/SpecPage';
7-
import { CatalogPage } from './pages/CatalogPage';
8-
import { InteractivePage } from './pages/InteractivePage';
9-
import { DebugPage } from './pages/DebugPage';
10-
import { LegalPage } from './pages/LegalPage';
11-
import { McpPage } from './pages/McpPage';
127
import { NotFoundPage } from './pages/NotFoundPage';
138

149
const router = createBrowserRouter([
@@ -17,18 +12,18 @@ const router = createBrowserRouter([
1712
element: <Layout />,
1813
children: [
1914
{ index: true, element: <HomePage /> },
20-
{ path: 'catalog', element: <CatalogPage /> },
21-
{ path: 'legal', element: <LegalPage /> },
22-
{ path: 'mcp', element: <McpPage /> },
15+
{ path: 'catalog', lazy: () => import('./pages/CatalogPage').then(m => ({ Component: m.CatalogPage })) },
16+
{ path: 'legal', lazy: () => import('./pages/LegalPage').then(m => ({ Component: m.LegalPage })) },
17+
{ path: 'mcp', lazy: () => import('./pages/McpPage').then(m => ({ Component: m.McpPage })) },
2318
{ path: ':specId', element: <SpecPage /> },
2419
{ path: ':specId/:library', element: <SpecPage /> },
2520
{ path: '*', element: <NotFoundPage /> },
2621
],
2722
},
2823
// Fullscreen interactive view (outside Layout but inside AppDataProvider)
29-
{ path: 'interactive/:specId/:library', element: <InteractivePage /> },
24+
{ path: 'interactive/:specId/:library', lazy: () => import('./pages/InteractivePage').then(m => ({ Component: m.InteractivePage })) },
3025
// Hidden debug dashboard (outside Layout - no header/footer)
31-
{ path: 'debug', element: <DebugPage /> },
26+
{ path: 'debug', lazy: () => import('./pages/DebugPage').then(m => ({ Component: m.DebugPage })) },
3227
{ path: '*', element: <NotFoundPage /> },
3328
]);
3429

app/vite.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,14 @@ export default defineConfig({
1111
port: 3000,
1212
host: true,
1313
},
14+
build: {
15+
rollupOptions: {
16+
output: {
17+
manualChunks: {
18+
vendor: ['react', 'react-dom', 'react-router-dom'],
19+
mui: ['@mui/material', '@mui/icons-material'],
20+
},
21+
},
22+
},
23+
},
1424
});

0 commit comments

Comments
 (0)