Performance issue with production builds

[karimbeyrouti]

Issue: 100k particles / instanced geometry run 60fps on dev build, 24fps on production builds

Core Technologies

React: v19.0.0
React DOM: v19.0.3
Three.js: v0.176.0
React Three Fiber: v9.1.2
React Three Drei: v10.0.7

Build Tools

Vite: v6.1.0
TypeScript: v5.7.2
Build Configuration
Manual chunking in vite.config.js:
manualChunks: {
  three: ['three'],
  'react-three': ['@react-three/fiber', '@react-three/drei'],
}
Using TanStack Router with autoCodeSplitting: true
Browser Targets
Production: "last 1 chrome version"
Development: "last 1 chrome version", "last 1 firefox version", "last 1 safari version"

Not sure why production builds are running so slowly (I would have expected the opposite),
does anyone have any insight here ?

This link runs at 60 FPS on dev mode, expectedly if we half the number of particles it's fine - but I would rather like to avoid that. Would be great to have performance of production build be on par with dev ones...

[karimbeyrouti]

Solved, by using target: 'esnext', in the vite.config.ts build options. (the default value is modules).