Three js tree shaking

I wonder if its possible to use only classes i need, im now having issue with total blocking time on pagespeed insights its almost 32.000 ms, so that overall perfomance score is under 70 on desktops and under 45 on mobile devices.
P. S. Three js and orbit controls are imported via importmap.

If you take a look at the source code from people who know how it’s done, like for instance viewer.js from Don McCurdy’s GLtfViewer, you’ll see something like this:

import {
	AmbientLight,
	AnimationMixer,
	AxesHelper,
	Box3,
    ...
8< --- shortened for brevity --- >8
    ...
	SkeletonHelper,
	Vector3,
	WebGLRenderer,
	LinearToneMapping,
	ACESFilmicToneMapping,
} from 'three';

instead of

import * as THREE from three ;

2 Likes

[Edit:] I was responding to a post which somehow vanished while I was formulating this post.

Tree shaking basically refers to the act of getting rid of unused code to get the smallest running code, for fastest loading times. So instead of importing everything from three.module.js as in

import * as THREE from three ;

you take an explicit list of all the classes you do need in your code, like

import {
// explicit list of things you do need
	Vector3,
	WebGLRenderer,
    ...
} from 'three';


I’ve imported a minified version and used only classes i need, but its still says almost half of the library size can be deleted, am i doing something wrong?
Also total block time is huge

In case you have an import map in your html, like the following:

<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.168.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.168.0/examples/jsm/"
      }
    }
</script>

If have observed that certain cdn providers are slower than others to respond. Maybe you’ll want to try a different cdn or a local Three.js install for comparison?

Asset loading will also contribute to the overall loading time (correct my anybody if I’m wrong in this …)

Note that import * as THREE from 'three' is fine if your bundler supports tree-shaking from that type of import, and most do. I use the individual imports in my viewer only for stylistic preference. :slight_smile:

But tree-shaking is a build-time optimization. If you’re using a static CDN instead of a build tool, there is no “build time” and no way to do tree-shaking.

If you’re building a production application and care about optimizing the build in this way then you really would want to consider a build tool like Vite. The optimizations are perhaps possible without an automated build system, but I wouldn’t venture into that direction unless you’re pretty sure about what you’re doing.

Also consider using minified code; this might do more good than tree-shaking.

2 Likes

Also if you’re using a CDN, you are going to be limited by which server has the lowest bandwidth, which I’ve often found is the CDN itself, since they aggressively throttle access.
To really do these tests, you want to remove the CDN from the equation by having all of the resources locally… then I would try what Don suggests and compare the page load time of full three.min.js vs your tree shaken/minified vite build.