perf(frontend): split heavyweight vendors into manual chunks (#823)

* perf(frontend): split heavyweight vendors into manual chunks

Vite's default chunking grouped monaco-editor, the xterm addons,
recharts, @xyflow/react + @dagrejs/dagre, and motion into shared
chunks with the Sencho app code. Any small change in the app would
bust the cache for the heavyweight vendor code, costing repeat
visitors a fresh download.

Add explicit manualChunks for monaco, xterm, charts, flow, and
motion. Each vendor is large enough to justify its own HTTP/2
stream, and grouping them by library keeps their cache key stable
across feature releases.

Also wire rollup-plugin-visualizer behind ANALYZE=true so
`ANALYZE=true npm run build` emits dist/stats.html for ad-hoc
bundle inspection without affecting CI or production builds.

Bump build.chunkSizeWarningLimit from the default 500 KB to 1500 KB
since the monaco chunk is intentionally large; this preserves the
warning's signal value for genuine future regressions.

* fix(frontend): use manualChunks function form for vite 8 typing

Vite 8's OutputOptions overload narrows manualChunks to the
ManualChunksFunction shape, so the object form rejected the chunk
keys with TS2769. Convert to the equivalent function form using
node_modules path matching; same chunk groupings as before.

Also pin rollup-plugin-visualizer to ^6.0.0; 7.x raised the engine
floor to Node 22 and CI runs Node 20, so npm emitted EBADENGINE
warnings. Version 6 supports Node 18+ and exposes the same
visualizer({ filename, gzipSize, brotliSize }) API.
This commit is contained in:
Anso
2026-04-28 03:00:08 -04:00
committed by GitHub
parent eb1d627096
commit f5dd8af7db
3 changed files with 302 additions and 2 deletions
+1
View File
@@ -75,6 +75,7 @@
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.5.0",
"jsdom": "^29.1.0",
"rollup-plugin-visualizer": "^6.0.0",
"tailwindcss": "^4.2.2",
"typescript": "^6.0.3",
"typescript-eslint": "^8.59.0",