Three.js: Custom build produces files too large

[paulmasson]

Simply trying to add OrbitControls to three.min.js by following the instructions in the Wiki. Working from a fresh clone of the master branch of r120 on a Windows 10 machine with current Node and npm. Added the line

export { OrbitControls } from '../examples/jsm/controls/OrbitControls.js';

to src/Three.js and ran npm install followed by npm run build-closure. The resulting file is twice as big as expected, and further runs of the build keep increasing file sizes. Either something critical is missing from the Wiki instructions or there is an error somewhere.

[donmccurdy]

If you are using examples that are ES modules (anything from examples/jsm) then you need to include three.module.js, not three.min.js. See https://github.com/mrdoob/three.js/issues/17482 for more information on this, and perhaps some workarounds.

[paulmasson]

@donmccurdy my use case requires I produce a final three.min.js file with OrbitControls, because it needs to be able to run from the local file system. What do you mean by the word "include" in your comment? Thanks!

[donmccurdy]

three.js has three possible versions of the core library:

• three.js
• three.min.js
• three.module.js

Files from examples/jsm, such as OrbitControls, depend on three.module.js. So you'll need to make sure your application does the same, or you'll get two copies. If you're having trouble getting this to work I would recommend posting more details about your custom build on https://discourse.threejs.org/ and we'll be able to help there.

[mrdoob]

Not sure this is a duplicate actually.

If I understand it correctly, what @paulmasson is trying to do is to create a new three.min.js file that has OrbitControls inside. He is adding export { OrbitControls } from '../examples/jsm/controls/OrbitControls.js'; to ./src/Three.js and because OrbitControls is importing three.module.js then the build ends up twice as big.

Once again, this wouldn't be a problem is import maps were in browsers already.

Let me give this a try.

[mrdoob]

I think #20389 should work?

[paulmasson]

@mrdoob thanks for understanding the issue! I did a shallow clone of the rollup branch, added the line for OrbitControls and built. Unfortunately file size is still double what it should be...

[mrdoob]

Strange. I tested it yesterday and worked fine. I'll merge it and test again.

[mrdoob]

Normal build:

Added OrbitControls to src/Three.js:

Resulting build:

[paulmasson]

@mrdoob well this is strange. The process works just fine on a Mac but not on a Windows machine. Both are using the same latest versions of Node and npm. On the Windows machine the file three.js is still doubling in size, and the next build step fails with this error message:

[BABEL] Note: The code generator has deoptimised the styling of C:\Users\Masson\Desktop\three.js\build\three.module.js as it exceeds the max of 500KB.
[!] Error: Unexpected keyword 'return'
build\three.module.js (25149:22)
25147:   }
25148:
25149:   toJSON( /* meta */ ) {
                              ^
25150:
25151:     return {
Error: Unexpected keyword 'return'
    at error (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:5210:30)
    at Module.error (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:9725:16)
    at tryParse (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:9639:23)
    at Module.setSource (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:10036:30)
    at ModuleLoader.addModuleSource (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:18178:20)
    at ModuleLoader.fetchModule (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:18232:9)
    at async Promise.all (index 0)
    at ModuleLoader.fetchStaticDependencies (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:18256:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (C:\Users\Masson\Desktop\three.js\node_modules\rollup\dist\shared\rollup.js:18233:9)

Are there known issues in this process for Windows 10? Would like to be able to have this work anywhere.

[paulmasson]

@mrdoob and the version built on a Mac currently errors out with

TypeError: this.updateMorphTargets is not a function. (In 'this.updateMorphTargets()', 'this.updateMorphTargets' is undefined)

[mrdoob]

@mrdoob well this is strange. The process works just fine on a Mac but not on a Windows machine.

Not strange at all. Just Windows being Windows 😤

Can you try this regex here?

if ( /[\\|\/]examples[\\|\/]jsm[\\|\/]/.test( id ) === false ) return;

[mrdoob]

@mrdoob and the version built on a Mac currently errors out with

TypeError: this.updateMorphTargets is not a function. (In 'this.updateMorphTargets()', 'this.updateMorphTargets' is undefined)

No idea where that's coming from...

[paulmasson]

@mrdoob and the version built on a Mac currently errors out with

TypeError: this.updateMorphTargets is not a function. (In 'this.updateMorphTargets()', 'this.updateMorphTargets' is undefined)

No idea where that's coming from...

This errror message has disappeared using a fresh copy of today's dev, so something got fixed somewhere. Incidentally the build process now produces messages like these:

src/Three.js → build/three.min.js...
(!) Circular dependencies
src/Three.js -> examples/jsm/controls/OrbitControls.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineGeometry.js -> examples/jsm/lines/LineSegmentsGeometry.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineMaterial.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineSegments2.js -> src/Three.js

[paulmasson]

@mrdoob well this is strange. The process works just fine on a Mac but not on a Windows machine.

Not strange at all. Just Windows being Windows 😤

Can you try this regex here?

if ( /[\\|\/]examples[\\|\/]jsm[\\|\/]/.test( id ) === false ) return;

With a fresh copy of today's dev, which includes the regex, the error message now is

[BABEL] Note: The code generator has deoptimised the styling of C:\Users\Masson\Desktop\three.js\build\three.module.js as it exceeds the max of 500KB.

Unfortunately the resulting build is still twice the expected size. Since I can build on a Mac, you may not care to pursue the Windows error.

[mrdoob]

This errror message has disappeared using a fresh copy of today's dev, so something got fixed somewhere.

Yes, we definitely broke that build: https://github.com/mrdoob/three.js/issues/20411

Incidentally the build process now produces messages like these:

src/Three.js → build/three.min.js...
(!) Circular dependencies
src/Three.js -> examples/jsm/controls/OrbitControls.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineGeometry.js -> examples/jsm/lines/LineSegmentsGeometry.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineMaterial.js -> src/Three.js
src/Three.js -> examples/jsm/lines/LineSegments2.js -> src/Three.js

That's okay. We can live with that.

Unfortunately the resulting build is still twice the expected size. Since I can build on a Mac, you may not care to pursue the Windows error.

I guess I'll have to get a Windows machine 😕

[paulmasson]

@mrdoob one final facet of this issue: the minified file used to contain a nice version reference of the form REVISION="120", but has been replaced by REVISION=e. Is there a reason for this change? Can it be reverted? Will the variable name remain "e" in future builds? Thanks!

[mrdoob]

We sitched from Google Closure Compiler to Terser. I'm not sure it's something we can control.