Disclaimer: I’m no three expert and I’ve always struggled with JS tooling for some reason
I have a project that does nothing particularly fancy (see it here), and I noticed that three’s bundle size for it was 500+ KiB (pre-gzip) and that seemed abnormal. Said project uses vite which in turn uses rollup under the hood. No particular config.
As I said that seemed strange so I searched if I was doing things wrong, but I was unlucky because that got me even more confused.
So maybe it’s simpler to just ask: does three tree-shake well as of almost 2022? does it come out of the box with the most popular bundlers, or is there something to do? is there something that I’m missing?
The tree-shakability was noticeably improved this year. Rollup should be able to discard many library parts depending on what you are using in your app. I’m not familiar with vite so I can’t give any advices in that regard.
That’s great to hear! Does 500 KiB sound like a lot to you for a very basic scene? Are you aware of something specific to do (for instance, import syntax) to get the most out of tree-shaking?
I don’t think vite really is relevant in this context actually, from what i know it basically hands over all the bundling part to rollup.
A good test to see if tree-shaking works with your bundler would be to import just a single class (perhaps Object3D?) and see how large the bundle is. Bundlephobia’s analysis claims three.js does support tree-shaking now too: three v0.136.0 ❘ Bundlephobia.
