From 9039108e82ca1cc112c9b84496ffdc628ffbf9f8 Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Thu, 22 Jan 2026 09:16:43 +0200
Subject: [PATCH] perf: split bundle into smaller chunks for better caching

Configure Vite's manualChunks to split the 1MB monolithic bundle into
separate vendor chunks:

- vendor-react (141 kB): React core libraries
- vendor-query (42 kB): TanStack React Query
- vendor-flow (270 kB): React Flow and dagre for graph visualization
- vendor-xterm (334 kB): Terminal emulator
- vendor-ui (27 kB): Radix UI components and Lucide icons
- index (210 kB): Application code

Benefits:
- All chunks now under 500 kB warning threshold
- Vendor chunks cache independently from app code
- Parallel loading of chunks improves initial load time

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ui/vite.config.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 8be09ba..f7c6aa1 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -14,6 +14,29 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // React core
+          'vendor-react': ['react', 'react-dom'],
+          // Data fetching
+          'vendor-query': ['@tanstack/react-query'],
+          // Flow/graph visualization (largest dependency)
+          'vendor-flow': ['@xyflow/react', 'dagre'],
+          // Terminal emulator
+          'vendor-xterm': ['@xterm/xterm', '@xterm/addon-fit', '@xterm/addon-web-links'],
+          // UI components
+          'vendor-ui': [
+            '@radix-ui/react-dialog',
+            '@radix-ui/react-dropdown-menu',
+            '@radix-ui/react-tooltip',
+            'lucide-react',
+          ],
+        },
+      },
+    },
+  },
   server: {
     proxy: {
       '/api': {