Add bundle visualizer to test-treeshake script

[marcofugaro]

Related issue: #19986 (comment)

Description

This PR adds rollup-plugin-visualizer to the test-treeshake script. When running the script, this message will appear:

After opening the file in a browser, you will be able to explore the analysis of the visualizer on the tree-shaken bundle.

⚠️ NOTE: It's important to notice that filesizes don't correspond to the actual output filesizes, but rather to the size of the source files. The plugin works on source files, for this reason as well it was necessary to import three.js from the source. The proportions are correct though, and only files not tree-shaken are present.

[Mugen87]

I guess a class like Ray or Triangle can't be tree-shaken since both are modified in Three.Legacy.js?

If we want to improve this, we should consider to a) remove the entries or b) move them into the respective classes (e.g. Ray or Triangle).

[marcofugaro]

Ray is used by Mesh.raycast(), Triangle is used by checkBufferGeometryIntersection() which is called in Mesh.raycast().

You can understand this by searching in the treeshake/index.bundle.js file 🙂

Prototype properties like Ray.prototype.isIntersectionBox don't hold the class from being tree-shaken, function calls like Object.defineProperties() do, but we removed most of those.

Ray.prototype.isIntersectionBox is there just because Ray is there, see this barebones example.

[Mugen87]

Okay, thanks for the clarification!

[mrdoob]

Thanks!