Tree Shaking ES6

Questions
1

I’m able to reduce my bundle size from 3.6MB to 1.9MB using tree shaking with Webpack 5.
However the bundle size still seems big and I would like to know if it’s possible to reduce it even further.

Here are the modules that I’m using:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ScenePerformancePriority } from "@babylonjs/core/scene";
import { SceneOptimizer } from "@babylonjs/core/Misc/sceneOptimizer";
import { SceneOptimizerOptions } from "@babylonjs/core/Misc/sceneOptimizer";
import { MergeMeshesOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { TextureOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { PostProcessesOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { LensFlaresOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { ParticlesOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { RenderTargetsOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { HardwareScalingOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { ShadowsOptimization } from "@babylonjs/core/Misc/sceneOptimizer";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { DefaultRenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { PBRMetallicRoughnessMaterial } from "@babylonjs/core/Materials/PBR/pbrMetallicRoughnessMaterial";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
import { Logger } from "@babylonjs/core/Misc/logger";
import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";
import "@babylonjs/core/Culling/ray";
import "@babylonjs/loaders/glTF/2.0/";
import "@babylonjs/core/Materials/Textures/Loaders/ktxTextureLoader";
2

Hi @inn3r,
Could you please tell more about these numbers?
Is this 1.9MB the size of uncompressed js bundled file? Or is it the size of gzipped minified js file?
Do you use production build?
Did you try to find out about the details of this size by using eg.

?

1 Like
3

Hi @neu5 !

I’m using production mode and the file is minified (but not gzipped since I’m deploying with Netlify which automatically compresses files).

Here is a complete report:
inn3r.com/report.html

And here is a screenshot:

Screenshot 2022-10-23 at 16.30.17
Screenshot 2022-10-23 at 16.30.171920×998 126 KB

4

Okey, so it really looks like you need all of these dependencies.
I don’t know if there is much space for the improvement here.

  1. are you sure you can’t have gzipped file served by Netlify? It would improve things a lot
  2. maybe there is some kind of lazy loading approach you can apply to make the experience for the user better - but it’s not what you’ve had initially wanted? I understand you would like to have smaller bundled file

I think that @RaananW may have something to say in this subject.

1 Like
5

  1. Netlify uses Brotli encoding on their edge which outputs smaller files than gzip. The developer doesn’t have to do anything since this process is automated: https://www.netlify.com/blog/2020/05/20/gain-instant-performance-boosts-as-brotli-comes-to-netlify-edge/

  2. I would like to know if there is any different approach besides lazy loading.

1 Like
6

At the moment, this is the best way to get the smallest bundle size. There is sadly no way around it, mainly because of dependencies on certain modules from the engine and scene.
Of course, lazy-loading, when configured correctly, is a wonderful way to control the initial bundle size, but the amount of data downloaded will eventually still be the same.

2 Likes