Add test-treeshake script

[marcofugaro]

Related issue: #21292 (comment)

Description

Added a test-treeshake script (suggested by @mrdoob) so it's possible to see the tree-shaked size three.js has for people using bundlers (the Minified Size entry in the screenshot).

The example code is the most basic working code, taken from the README.

It's importing three.js like if the user was importing it from the node_modules, so it imports build/three.module.js. This means that to test some changes you do locally in the src/ folder, you have to do:

npm run build && npm run test-treeshake

[mrdoob]

Thanks!

[Mugen87]

Seems the recent class migration further improved the bundle size 🎉.

[marcofugaro]

Oh yes! Now if we remove some other deprecated methods we could get it down even more!

[mrdoob]

Oh yes! Now if we remove some other deprecated methods we could get it down even more!

What other deprecated methods are those? 🤔

[marcofugaro]

I actually did that test by removing Three.Legacy.js altogether 😅

These only are the blocking methods, if removed they shave off ~10kb

• if removed, InstancedBufferGeometry.maxInstancedCount saves ~0.8kb
• if removed, Curve.__arcLengthDivisions saves ~3.1kb
• if removed, Raycaster.linePrecision saves ~1.42kb
• if removed, InterleavedBuffer.dynamic saves ~2.17kb
• if removed, MeshPhysicalMaterial.transparency saves ~3.5kb

The other ~30kb are taken up by the deprecated methods of the classes that can't be tree-shaken because they are always needed such as WebGLRenderer, WebGLShadowMap, Light, Matrix3, Matrix4, Vector2, Vector3, Object3d, Mesh, Material and so on. They can't bee tree-shaken because they act like class methods I guess, rollup example here.