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
2 Likes
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 (github.com)
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
