Do we have to use the whole 0.4GB file to use three.js extensions with ES6?

Hi,

At the moment im using three.js with WebXR to create a AR interface, so ive used Node Express (I know) so that can use HTTPS and SSL, which is required for devices to accept AR.

The only thing about this, is that it seems I have to take the whole 400MB+ three.js file to use the GLTFLoader, since the loaders are all linked to eachother with imports. The DevBridge tutorial im following also seems to recommend doing this. Obviously Its not an issue right now in development, but in production that would be a pretty hefty download no? There may be something that I am missing im getting something mixed up though, as it doesn’t seem to take that long to load up the page.

I did try to use path to route to /jsm and /build in node_modules, but I had some some issues when importing GLTFLoader, where it would say

Failed to resolve module specifier “three”. Relative references must start with either “/”,

Here is the tutorial:

If you would like some code samples, please let me know,

Thanks!

node is a local dev environment, you cannot do web development without it so yes you absolutely need it. but none of this should ever end up on your server, your distribution package is a few kb, 200, 300, 400kb something like that, but not 0.4GB

for this to work you need a bundler, like vite, esbuild, parcel, webpack. the bundler creates a readymade build for you, compresses files, and it only takes the parts that you actually need. it also gives you a dev environment, you should not have to mess around with node express. i couldn’t imagine having to refresh the browser on every change i make, resetting the whole state of the app i’m working on.

tldr, install something like vite. it sets a project up in seconds. npm install three. start it, every change you make in your editor is immediately reflected. then build it, deploy it by copying the contents of the /build folder to your server.

1 Like

Just to clarify a few numbers here:

  • three.js repository on GitHub: 450 MB
    • Includes tests, the website, the editor, and many textures and models used to test and develop the library. You only need to download this if you’re contributing changes back into the three.js repository.
  • three.js package on npm: 27 MB
    • Includes just the library itself, and common addons like loaders and controls. Installed to local dev environment when you run npm install --save three. Most projects using three.js will install this, and then import only the specific parts of the library that they need.
  • three.js minimal bundle: 0.15 MB (minzipped)
    • Smallest version of the library, without tree-shaking. This (plus any additional files) is what should actually be deployed with your webpage, as @drcmda describes above. Bundlers will separate this out from the npm package automatically when your application is built.
3 Likes

@spikethea I recommend you check out Bundlephobia. It’s a site that tracks the size of all Node modules once bundled to help prevent runaway file sizes. Three.js alone should be 609kb minified, and 147kb after g-zipping: three v0.130.1 ❘ Bundlephobia

When I run npm install three I get a 25MB directory, but that’s only on my local development environment where all source files are expanded. You’ll never need this in production, your bundler should only use the 609kb core library + GLTFLoader, which is a few extra KB.

threeSize

2 Likes