Greetings all using three.js in an angular app and it has blown up my bundle size, any idea how to get three.js to be esm module so the whole lib is not imported into the app?
three.js is already an ESM module — see build/three.module.js. Assuming you are importing from the ‘three’ npm package with a modern bundler like webpack, some modest tree-shaking should already happen. In typical usage, I would expect the size added to the bundle to be about 150kb, after minification and gzip. You may need to make sure your build tool is building in production mode and not development mode.
For this website look at the soure map
this is the file leveraging three.js in the application
portfolio_v2/intro-main.component.ts at master · MichaelOdumosu57/portfolio_v2 (github.com)
portfolio_v2/configs.ts at master · MichaelOdumosu57/portfolio_v2 (github.com)
this is the site AngularAppV2 (my-portfolio-5907b.web.app)
so you mean to tell me three.js class are simply that big and if it took the whole lib my app would be gigabytes?
I’m not sure where you’re getting gigabytes here. As you can see at three v0.143.0 ❘ Bundlephobia, the size of the three entrypoint on the latest release is (without any tree-shaking used) about 600 kb, or 150 kb gzipped. Most websites should use gzip or another lossless compression method. Using tree-shaking and dead code elimination enabled by ES Modules will reduce this a little bit, but not a lot. If you are looking for a 30kb WebGL library you will need to consider something simpler like regl.
If you import additional addons from the three/examples/jsm/* folder, these will increase the size, but they are a-la-carte files, and you import only the ones that you need. Those are never included if you are just doing import { ... } from 'three';.
Very well you can close it I have another issue