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…

Hi! I just want to share our experience with treeshaking a project using three and GSAP. We’re bundling with Rollup and our solution at the moment sounds somewhat similar to what @yushijinhun ’s plugin is supposed to do, but still a bit different: rollup treeshake: add treeshake: { moduleSideEff…

Thanks for sharing, that’s very interesting. I’m curious, if you have time, can you check what the smallest bundle size is if you import just a single thing from three.js? E.g: import { Scene } from 'three'; // or import { WebGLRenderer } from 'three'; That will give a better idea of how well tre…

Here’s another way using aliases, this brings threejs down to 95kb for simple geometries and materials, you don’t have to change the way you write imports and it works for add-ons and third party imports. registering the alias: https://github.com/drcmda/testlighting/blob/faed149a35d44d116b5c30434f2…

Ok, tested with this simple Svelte-App (three 116.1): <script> import {onMount} from 'svelte'; import {WebGLRenderer, Scene} from "../node_modules/three/src/Three"; let scene; let renderer; let c; onMount(() => { scene = new Scene(); renderer = new WebGLRen…

@cream I’ve tested this out on a simple app that uses GLTFLoader + OrbitControls, no other libraries. This results in about 340kb less (uncompressed) code. That’s great! :grin: Using the Chrome coverage tool, I’ve gone from about 50% unused JS to 37%. EDIT: I compared this with the edited src/Thre…

Well as I see it, the most of it already is tree-shakable, you can get bundle sizes (three + etc.) below 300 KB transferred over network and that’s a single high-quality JPEG, so I’m pretty satisfied with that :man_shrugging: Just import from ‘src’ and move example-based modules to ‘src’ if you need…

Well as I see it, the most of it already is tree-shakable I think the reason the bundle size is still so large, even when tree-shaking is working, is that all the GLSL code is still imported. That means you still get all the code from src/renderer/shaders even when you just use a MeshStandardMate…

ah, I see, so it is relevant to tree-shaking. Well, nothing against that cherry on top of all other benefits concerning more creativity with materials / shaders. :rocket:

I do not know how the node-based materials ( Promote Node-based Materials to Core and Polish · Issue #16440 · mrdoob/three.js · GitHub ) could help with three-shaking but I only skipped over this issue. It’s totally true what @looeee wrote. When you include something from the ShaderLib, all Shaders g…

Tree Shaking Three.js

Questions

munrocket May 19, 2020, 11:30am 58

As I know here solution how to make Three.js tree-shakable out of the box. We need a hero. Node materials benchmark is pretty good. Pure profit.

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

Tree Shaking Three.js

Related topics