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>
This commit is contained in:
Auto
2026-01-22 09:16:43 +02:00
parent 28e8bd6da8
commit 9039108e82

View File

@@ -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': {