Npm - three.js and three.module.js

Questions
, ,
1

Hey!

I’m new here, so I hope I’m doing everything right. If not, I’ll take criticism gladly!

When developing a web application I use three.js. I have included the npm module “three” in my package.json as prescribed. Everything works fine so far.

While analyzing the bundle with the webpack-bundle-analyzer for webpack I noticed that the three.js and the three.module.js become part of my bundle:

  • three.js: ~140KB
  • three.module.js: ~136KB

To be able to use three in all my classes, I use the ProvidePlugin with which I make the module available globally - this replaces the constant import.

Now the question: Do both files really have to be part of my bundle? I manually manipulated the /node_modules/three/package.json and entered only the three.module.js under “main”, as well as removed the three.js in all places. So only the three.module.js are loaded and this approach reduces my bundle size considerably - without (so far noticeable) loss of functionality. But can a loss of functionality occur in the future?

Should only one of the two files become part of the bundle during the normal import of three.js, or am I perhaps doing something wrong with the ProvidePlugin?

Thanks in advance!
Greetings

2

No, that’s definitely wrong. Both build files contain the same logic, it’s just exported differently. three.js is a UMD file whereas three.module.js uses ES6 modules.

3

Thank you really much! :slight_smile:

4

would be interesting to know what led to these two being present in the first place. there is a longstanding bug regarding node resolution in threejs that causes this exact behaviour in commonjs environments that use addons. cjs resolves “three” which points to “build/three.js”, addons pull directly the module without resolution. but webpack should default to the module by default, not the commonjs export.

1 Like
5

As an additional note on this subject:

I’m using esbuild to bundle three, and I noticed both files “three.js” and “three.module.js” are added in the bundle.

→ I didn’t use the “module” field on my intermediate package, the one requiring three.

so now:

  • I bundle my package using the format esm
  • provide the “module” field pointing to my bundle

now when I bundle my final project, only three.module.js is used :ok_hand:

2 Likes