Tree-shaking not working with ESBuild

[TesseractCat]

Description

I'm trying to use treeshaking, (aka import { Vector2 } from 'three';) with esbuild, but it isn't working, instead it's pulling in all of three.module.js.

Reproduction steps

1. Create a file that imports only Vector2 from three
2. Attempt to bundle it with esbuild: npx esbuild index.js --bundle --outfile=bundle.js
3. Notice that the bundle size it much larger than it should be

Code

I made a small reproduction repo: https://github.com/TesseractCat/three-esbuild-tree-shaking-broken

Live example

N/A

Screenshots

No response

Version

^0.151.3

Device

Desktop

Browser

Chrome, Firefox

OS

Windows, Linux

[TesseractCat]

I was looking through the tree-shaking issue, and I found this comment: #24199 (comment).

The solution to change the import from 'three' to 'three/src/Three.js' fixed tree-shaking for me.

[Mugen87]

Following the discussion it seems the "importing Vector2 case" was discussed extensively and the conclusion was:

So how about this, if we all agree that using 'three' without a renderer (an ES module library) is a secondary or even unsupported use case, then I think we can close this issue.

Closing this issue as Won't fix.

[donmccurdy]

The solution to change the import from 'three' to 'three/src/Three.js' fixed tree-shaking for me....

I would be cautious with this workaround – addons like loaders and controls also import from 'three', so it's easy to end up with multiple copies of three.js in your codebase.

Support for the missing tree-shaking features in ESBuild can be tracked in the issue below. As @Mugen87 mentions, this isn't something we plan to change in the meantime.

• re-exported namespaces cannot be tree-shaked evanw/esbuild#1420