How to improve webapp load performance, and interact with the three.js file in an optimal way

[Mugen87]

@Avner_Moshkovitz

Is there a way to break the file three.js into smaller pieces, and load only the code that is in the critical path?

Unfortunately, it’s not yet possible to import only the classes from the three.js lib which are actually used in a project. This kind of dead-code elimination is called tree shaking and not yet supported by three.js. More information about this topic right here:

Three.js file size when importing via NPM and bundling with Webpack

The treeshakeability of three.js is not ideal at the moment (more information about this topic right here: https://github.com/mrdoob/three.js/pull/14654) I’m currently working on the first step in order to improve this situation by removing all IIFEs from the codebase and then move towards ES6 classes. When I remember correctly, there is also an open issue in context of three.js's shader library that impedes tree shaking. If those issues are solved, you can expect smaller bundle sizes and a fa…