Bundle Size Reduction

[inverser]

How to reduce bundle size with Webpack?

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 somebody help please ? This is the entry file of my bundle (app.js) :

expand

import { Scene } from 'three'; const scene = new Scene(); console.log('hello from the bundle: ', scene)

A…

After reading this thread, I saw that the guys are recommending to comment out some unused imports from the main threejs code. I’m using GitHub - designcourse/threejs-webpack-starter and this THREE use case has modules that I import during development. But during build, the THREE script is taken from /build/three.module and there is a lot of code in this file that is hard to parse to clean up. When trying to remove unnecessary things from it, I am faced with the fact that the script breaks when trying a new build. Therefore, I have to leave it as is.
I understand that THREEJS only tries to use the imports it needs. Because different scenes on THREE have different final build sizes.
At the same time, in the browser analyzer, you can see that more than half of the JS bundle is not used by the browser, during the execution of the code itself is already in production.

Are there any ideas how to reduce the size of the bundle? Or, if you have come across libraries that can remove unnecessary code from any JS file, I will be very grateful to you

[Mugen87]

The linked topic is actually no longer valid since the tree-shaking capabilities of three.js have been improved over the last releases. It’s not recommended that you manually remove things from the module file that you don’t need. Bundlers should do this automatically, assuming there are no issues in the bundler or library that prevents tree-shaking.

[inverser]

Have you by any chance used some npm plugin to remove unnecessary code from the finished js bundle?

[Mugen87]

No, I’m just using rollup for my builds.

[drcmda]

Not sure if that’s still the case but i recently saw a lengthy twitter threat in which they said threejs no longer tree shakes, at all, since it is full of side effects.

Patrick Schroen

[Mugen87]

This should be addressed with r141. There was some problematic prototype access in the code that has been removed.

[donmccurdy]

I believe some fixes were also made to Rollup in the process. Modern bundlers like Rollup or Webpack should be able to tree-shake without plugins, but if code that you’d expect to see removed is still there when using one of these bundlers, it may be worth opening an issue.

[inverser]

The fact is that the screenshot from DevTools > Coverage indicates that the code that webpack builds is very unoptimized. Its size, according to the browser, can be reduced by almost two.
Although, webpack tries to optimize the code during the build process in prod mode. And the size of the bundle itself is satisfactory. However, I was faced with the task of making 2 threejs scenes on one page.
One scene is using one version of threejs, another is using a different version. Therefore, I had to make 2 separate bundles.