Hello! I’m building a web app with Three.js. Our main focus is instance loading on the first visit of the user, therefore I explore possibilities to reduce the file size of my bundle. When I look what makes the biggest portion of the bundle I see the whole Three.js library. Therefore I tried to tre…

[image] tschoartschi: Some other things we always should keep in mind is, that parsing a JPEG is something completely different than parsing a JS file by comparing the bundle size with a 300 KB JPEG I actually just had a mere comparison between loading a bundle.js and loading some heavy image…

[image] cream: 2.17s for loading bundle (evaluation time unchanged) vs. 1.28s loading the image. What device are you testing with? That might be very different on a budget phone than a laptop.

[image] cream: the nice colored squares on the right are all ShaderChunks Why you have WebXR? You actually using it?

it’s part of webglrenderer, deeply wired in, like pretty much everything else: https://github.com/mrdoob/three.js/blob/59861dee1614ae5d49913a098d068638941b5d23/src/renderers/WebGLRenderer.js tree-shaking won’t be a reality until this file is made from scratch it seems, apart from the other things li…

Was also first wondering, no, not using it, see the modified simple svelte app , that’s all. On the other hand it’s logical since access to the XR API can only be enabled / disabled on the WebGLRenderer itself via WebGLRenderer.xr ( WebXRManager docs ) plus :point_right: see @drcmda ’s answer .

Well then let’s go and rewrite everything to classes as there seem to be no sane way around it ! :wink:

[image] looeee: What device are you testing with? That might be very different on a budget phone than a laptop. the above was on a desktop ws, just lowered the network bandwidth in dev tools. I’ve now tested it on our mobile device (Newtwork set to fast3G) we use for budget phone testing: a …

Would you get any benefits from say not including gsap in the first bundle? If i understand gsap doesn’t do anything with gpus? For example i’m thinking loading some basic three, compiling shaders or something, while the rest of the chunks are being fetched? While some of that size goes into most ma…

Am i reading the conclusion here right? Three is essentially tree shakeable, but it only goes as far as how the code is designed. No matter what you do with code, you will still have the shader chunks, which, because they are strings, are hard to import/separate etc. Bok imenjace :wink:

The bundle would be even smaller, but we would than have to load gsap via CDN. All of our custom code are TypeScript Classes / Modules, so it felt more natural to install gsap as npm dependecy and just import it + this way it also gets treeshaked. Btw. as I’ve heard from some of my colleagues using…

Tree Shaking Three.js

Questions

munrocket May 25, 2020, 3:58pm 78

According to Cream screenshot, we can focus on improving WebXR and Math classes. Because it’s plain JS and refactoring there is much easier. Also here interesting issue related to loading speed: How to download textures before JS parsing?

Topic		Replies	Views
Three.js file size when importing via NPM and bundling with Webpack Questions dev-tools	8	7659	November 19, 2019
How to reduce bundle size with Webpack? Questions webpack	25	11409	February 16, 2023
Idea: update all modules to not import the entire three.js library Discussion	24	3008	April 19, 2022
How to improve webapp load performance, and interact with the three.js file in an optimal way Questions optimization	5	4599	June 14, 2023
Module Import / Usage Questions modules , dev-tools	27	8223	February 8, 2022

Tree Shaking Three.js

Related topics