ES6 Tree Shaking build large bundle size

I import the dependencies this way, finally get 1.5M ungzip js file. Is this correct?

import SceneComponent from "babylonjs-hook";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { GlowLayer } from "@babylonjs/core/Layers/glowLayer";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { ShadowOnlyMaterial } from "@babylonjs/materials/shadowOnly/shadowOnlyMaterial";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";

import "@babylonjs/loaders/glTF/2.0/glTFLoader"; 
import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader"; 
import "@babylonjs/core/Rendering/boundingBoxRenderer"; 
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent"; 

Hey you can have a look at this article to detect what is imported and if it is expected:
Size matters. The scene graph and all the tools and… | by Babylon.js | Medium


what you have there looks good. make sure you are on the latest version of babylonjs-hook (from January), which added specific improvements to tree-shaking. Did you run your project through the webpack analyzer?
webpack-contrib/webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap (

next and gatsby have their own analyzers.1.5M is pretty good and also I see you were specific about which loader (glTF only), so I don’t think bundle will drop any more. I find the interactive treemap the best way to visualize what is contributing most to bundle size.

1 Like

Hi @Deltakosh @Deltakosh , thank you for your feedback. I really not good at code optimization. I use Create-React-App for this project and use source-map-explorer to check the bundle size report. Here is the result:

You are the only one who can know if each big contributors (like mesh here for instance) should be here