Three.js: Custom build

[olegvakulenko]

Hi!

I would like to be able to generate a custom build of the library.

What is it for?

Now the library has many features, but not all of them are used in a specific project. At the moment, the size of the library in the minimized state is about 640K, which is quite a noticeable size and if it were to be reduced correctly it would only be better, in my opinion.

What have I tried to do?

In my primitive example, I created a separate directory with the project and transferred there only those files that were in the dependencies for the components I needed. After I compiled the resulting set of files using the commands from the package.json file, I got a minified library with size 388K, which is a rather noticeable difference between the full version.

What would I like to ask?

1. Perhaps there are ready-made tools where I could select a set of functionality I need and generate a library for me? I tried searching but found nothing similar.

2. I can try to make a similar tool and I wanted to know how useful this might be for other users.

3. Can you make some changes to the project code to simplify the implementation a little?
   That's what interests me.
   When I figured out, I realized that in addition to taking the components I needed, I also need to edit the Three.js file, i.e. comment out the lines of components I don't need. For example:

//export { Fog } from './scenes/Fog.js';

But there is also a line like this:

export * from './geometries/Geometries.js';

with the help of which several other components are automatically connected, among which there are those that I do not use. So is it possible with the Three.js file to replace the line

export * from './geometries/Geometries.js';

to the full content of the corresponding file? If you do this, then you can manage all the components of the library from one place. The same applies to other places where there is an asterisk.
What do you think of these changes and the development of such a tool?

Thank.

[tschoartschi]

@olegvakulenko I think what you are looking for is "tree shaking", I also played around with creating a custom build of Three.js and the best I was able to come up was also around 300KB. In the Three.js forum there is a very detailed discussion about the things which are possible. You can read it here: https://discourse.threejs.org/t/tree-shaking-three-js/1349

If you have new insights it would be great if you could share them 🙂

[mrdoob]

On that note, since r120 the library is starting to do a better job at tree shaking.

[Mugen87]

@olegvakulenko Please use the forum if you have more questions about optimizing builds. There are existing issues about improving the tree-shakability like #19986.