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…

I’ve just tried it, works well. Tested with Parcel. Thanks :slight_smile:

@tiborsaas great to see more people experimenting with tree-shaking for Three.js. What were the results with Parcel? I would be really interested in seeing the results :slight_smile: I think the main problem with tree-shaking in Three.js is the ShaderLib. If you need one Shader all of the ShaderLib…

I was trying with webpack v4.29, following the tree shaking guide . :heavy_check_mark:︎ webpack uses three.module.js which uses the import/export syntax :heavy_check_mark:︎ disabled module transformation (@babel/preset-env config: {modules: false}) :heavy_check_mark:︎ added sideEffects: false to t…

now that the es6 modules are implemeted in threejs ( jsm folder ), with everything well configured in webpack, the tree shake still doesnt work, is this a pb with webpack or threejs ? we are almost there !

Wonder if there has been an update with this. I converted a lot es6 and its all working nicely but still full sized bundle

Related: https://github.com/yushijinhun/three-minifier

You sir just got a star. The GLSL minifier mostly removes the comments? The gl literal thing is super interesting, how much does this alone shave off? This is absolutely guaranteed to be the same across the universe?

Tested with rollup: noCompileGLConstants: false, noCompileGLSL: false: 354K noCompileGLConstants: true, noCompileGLSL: false: 354K noCompileGLConstants: false, noCompileGLSL: true: 372K noCompileGLConstants: true, noCompileGLSL: true: 372K See https://github.com/mrdoob/three.js/blob/03cad1e86…

Just to confirm what i’m reading here, it doesn’t seem like it shaved off much, if anything?

Tree Shaking Three.js

Questions

Mugen87 August 13, 2019, 9:36am 45

The current status the engine’s tree shaking support is mentioned here: Three.js file size when importing via NPM and bundling with Webpack

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

Tree Shaking Three.js

Related topics