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…

Can you please provide a minimal reproducing example? Since just setting modules: false is pretty much default practice, because it’s necessary for tree shaking. My .babelrc for example: { "presets": [ [ "@babel/env", { "loose": true, "modules": false, "t…

I’m not sure if babel is the right tool for tree shaking but I’m not an expert in the React ecosystem (since you load something like react-hot-loader). My example uses Rollup but some other users reported better results with webpack

@tschoartschi I was talking to @sasha240100 , reply button is not working as expected :smiley: Nothing magic about react, there’s no such a kind of any special ecosystem required. babel is just transpiling your code. And neither babel is not doing any kind of tree-shaking, nor webpack. It’s all abou…

@nulltails I added uglify to my repo (check the link in the first post, I can not repost it here). The results are as follows: File size not uglified: 0.573217 MB File size uglified: 0.410594 MB File uglified is 28.370% smaller! So I’m not sure if Uglify can do a lot of magic. Maybe it’s because I…

@tschoartschi errm, where did I say uglifyjs will just do all the magic itself? You should take a look on that webpack issue I’ve sent above, since I mentioned uglifyjs just in case of this issue - https://github.com/mishoo/UglifyJS2/issues/1261 Also, I finally have found some free time and tested…

There was a suggestion above that you’ll get better results by doing import {MeshBasicMaterial} from 'three/src/materials/MeshBasicMaterial.js'; Have you tried that?

I was playing with this a few months back and got some decent results with rollup and uglify. [image] 2pha/three-rollup-treeshake-test Just testing out treeshaking a three.js app with rollup - 2pha/three-rollup-treeshake-test

Related: https://github.com/mattdesl/threejs-tree-shake

@donmccurdy thanks for the link. I was thinking about building exactly the same thing but it turned out to be rather complex and I didn’t have the time to finish it. Cool that others are also trying to do the same :slightly_smiling_face: The benchmarks which are shown in this repo are very similar t…

Tree Shaking Three.js

Questions

sasha240100 December 22, 2017, 11:41pm 35

Tested it again… And it seems that I was wrong - it gives size reduction from ~500 Kb to ~485Kb while I’m importing only MeshBasicMaterial:

import {MeshBasicMaterial} from 'three';

Used webpack3 with uglifyjs plugin

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

Tree Shaking Three.js

Related topics