Optimize bundle size — main chunk is 2.3MB / 675KB gzipped #3

New issue

Closed

opened 2026-08-03 14:37:12 +00:00 by Mark · 0 comments

Mark commented

2026-08-03 14:37:12 +00:00

Owner

The production build produces a single index-*.js chunk:

dist/assets/index-BejB8O8h.js   2,281.56 kB │ gzip: 674.87 kB

This exceeds the 500 KB warning threshold by ~5×. Three.js, drei, fiber, and framer-motion are the obvious culprits, and Home.tsx is the only file that needs them — the workbench pages don't.

A second issue: jszip is both statically and dynamically imported across 3 files; Vite can't split it into its own chunk.

Approach:

Move Three.js + drei + fiber imports behind a lazy boundary on the workbench pages (Workspace.tsx, Libraries.tsx).
Static-import jszip in src/lib/libraries.ts (drop the import()) so it gets deduped into one chunk.
Optionally configure build.rollupOptions.output.manualChunks in vite.config.ts to split three, framer-motion, and @radix-ui/* into vendor chunks.
Run npx update-browserslist-db@latest (currently 8 months stale, which the build itself warns about).

Acceptance:

Initial chunk under 400 KB gzipped
Workbench-only routes lazy-load the 3D viewport bundle

Labels: enhancement

The production build produces a single `index-*.js` chunk: ``` dist/assets/index-BejB8O8h.js 2,281.56 kB │ gzip: 674.87 kB ``` This exceeds the 500 KB warning threshold by ~5×. Three.js, drei, fiber, and framer-motion are the obvious culprits, and `Home.tsx` is the only file that needs them — the workbench pages don't. A second issue: `jszip` is both statically and dynamically imported across 3 files; Vite can't split it into its own chunk. **Approach:** 1. Move Three.js + drei + fiber imports behind a lazy boundary on the workbench pages (`Workspace.tsx`, `Libraries.tsx`). 2. Static-import `jszip` in `src/lib/libraries.ts` (drop the `import()`) so it gets deduped into one chunk. 3. Optionally configure `build.rollupOptions.output.manualChunks` in `vite.config.ts` to split `three`, `framer-motion`, and `@radix-ui/*` into vendor chunks. 4. Run `npx update-browserslist-db@latest` (currently 8 months stale, which the build itself warns about). **Acceptance:** - Initial chunk under 400 KB gzipped - Workbench-only routes lazy-load the 3D viewport bundle Labels: enhancement