Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tree-shaking broken by Object.defineProperties( ... )

See original GitHub issue

Unclear to what extent this is a change in bundlers, or a misunderstanding of how tree-shaking applies, but the three.module.js bundle mostly doesn’t get tree-shaken as expected today. Here’s a very minimal repro of the issue in Rollup, but we think something similar happens with esbuild and webpack too:

Rollup Repl

References:

Issue Analytics

State:
Created a year ago
Comments:43 (29 by maintainers)

Top GitHub Comments

6reactions

Mugen87commented, May 9, 2022

Would you like to take care of it?

Yes. I’ll remove everything below r130. For all other entries in THREE.Legacy.js I will note the release/commit so it clear when it was added.

5reactions

donmccurdycommented, May 9, 2022

instanceof is even worse for tree-shaking.

Hm, but why?

With foo.prototype.isFoo = true the class can safely be tree-shaken, build tools just aren’t perfect at detecting it. But if WebGLRenderer checked material instanceof PointsMaterial instead of material.isPointsMaterial, we could never tree-shake PointsMaterial because the class is now actually being imported and used.

We publish on NPM and it’s not possible to do that without using semver, so we’re already using it. We just do so wrongly…

Aside — We are and we aren’t… Semver has a special case for versions <1.0.0, where breaking changes are allowed to occur in minor (0.x.0) releases. We’re working within that special case. They presumably intended its use for “initial development”, whereas we use it for other reasons, but tools like npm and yarn do understand that 0.141.0 → 0.142.0 is a potentially-breaking update.

Top Results From Across the Web

Tree-Shaking Problems with Component Libraries - Medium

Tree-shaking isn't magic, and much like the garbage collector, ... can be removed if the left hand side object is not actually used....

Content Types - ESBuild

There are some broken implementations of ECMAScript modules out there (e.g. the ... If foo.js tries to reference the module namespace object using...

Tree shaking - MDN Web Docs Glossary

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code.

microsoft/applicationinsights-properties-js - Yarn

And to benefit from the tree-shaking enhancements also introduced as part of version ... Tree-Shaking Support and enhancements ... defineProperty; Object.

decreasing front-end size and improving caching - Ivan Akulov

Object.defineProperty(t,"__esModule",{value:!0}); var ... you use ECMAScript imports and exports, webpack becomes able to do tree-shaking.