Vite/Rollup doesn't tree shake ThreeJS when using R3F

I’m importing Canvas and just console.logging it, but it looks like all of the Three.js is bundled as well. Is this happening for anyone else? I was able to just import a Vector3 from ThreeJS and console.log it and it was tree shaken.


export default function Hero() {
  console.log(Canvas);
 return null;
}

see React Three Fiber Documentation
there’s a babel plugin as well. now you only pull into the bundle what you use, well … in theory.

in practice three does not tree shake, efficiently at least. almost all its constructs are hard wired into webglrenderer for type checks and such. canvas must use webglrenderer, and with that comes the whole bulk of threejs except a few classes here and there.

2 Likes