I’m finally learning how to use three with Webpack, So far everything is fine, but I expected my bundle to only include the parts of three that I needed (tree-shaking ?). But the little test I’ve done only imports THREE.Scene and makes a bundle of 3 275kb… I’m sure I’m doing it wrong somehow, can s…

does it work? from what i have heard nothing tree shakes threejs atm. but there have been tons of changes to rollup since i tried last time. what is the smallest you could get for, say, a box-geom, a light and a meshStandardMaterial?

I’d have to try out. Didn’t attempt this yet, hence the “Hey that’s not a bad idea!” :smiley:

[image] drcmda: ultimatively i hope bundle size is something that will become more of a focus Me too. Especially if it really is as simple as converting to classes. However, I (and many others) have been bringing this up over on the repo for several years now and there’s simply no interest in…

[image] looeee: I (and many others) have been bringing this up over on the repo for several years now and there’s simply no interest in prioritizing this. It’s not that there isn’t interest, but that there is a long process of steps that need to happen in order to get there… We can’t use ES c…

[image] looeee: Especially if it really is as simple as converting to classes. hmm, i don’t think it’s so easy. webglrenderer looks pretty wired and shaderchunk is pulls in everything. the snapshot below is what you get when you just fetch box+pointlight+standardmaterial (95kb). there is stil…

[image] donmccurdy: It’s not that there isn’t interest, but that there is a long process of steps that need to happen in order to get there… I wasn’t intending to dismiss that. However, we have made very little progress on most of these steps. We converted the examples to modules, which finis…

[image] donmccurdy: It’s not that there isn’t interest, but that there is a long process of steps that need to happen in order to get there… We can’t use ES classes in src/ without migrating examples/ code first, and we can’t (or have decided not to) migrate examples/js because it’s in the middl…

[image] drcmda: these files have no meaning, they can’t be imported or readily be used. Some people do still use the old <script> tag style. Hard to believe I know :grin: In any case, as @donmccurdy says, examples/js is going to be deprecated. I’m not sure if there’s a set timeframe for that…

[image] looeee: Another consideration, more important, is that many old examples around the web will stop working since they reference the files in examples/js directly from the GitHub CDN. For example, I think that all of westlangley’s examples on GitHub do this. This sounds like a valid rea…

[image] looeee: Some people do still use the old <script> tag style. Hard to believe I know :grin: You must admit that the usage of JavaScript is not getting simpler, and most of this complexification is favored by bundling. I remind you that a lot of people who learn Three.js do it without …

How to reduce bundle size with Webpack?

Questions

sushmagow August 8, 2022, 3:26pm 26

Anyone able to reduce the bundle size with webpack?

Topic		Replies	Views
Tree Shaking Three.js Questions build-tools , tree-shaking	79	27375	May 29, 2020
Three.js file size when importing via NPM and bundling with Webpack Questions dev-tools	8	7635	November 19, 2019
Module Import / Usage Questions modules , dev-tools	27	8203	February 8, 2022
The examples/js directory will be removed with r148 Discussion modules , dev-tools , javascript	50	8866	April 20, 2023
Bundle Size Reduction Questions bundler	7	4369	June 5, 2022

How to reduce bundle size with Webpack?

Related topics