# ES6 Tree Shaking build large bundle size

**URL:** <https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084>\
**Category:** Questions\
**Tags:** documentation\
**Created:** [May 24, 2021, 4:23pm UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084 "2021-05-24T16:23:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Franco](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/franco/32/16275_2.png) [@Franco](https://forum.babylonjs.com/u/Franco)\
**Post date:** [May 24, 2021, 4:23pm UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084/1 "2021-05-24T16:23:13Z")

</div>

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

```javascript
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"; 

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 24, 2021, 4:33pm UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084/2 "2021-05-24T16:33:23Z")

</div>

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](https://babylonjs.medium.com/size-matters-e0e94dad01a7)

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 24, 2021, 11:21pm UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084/3 "2021-05-24T23:21:48Z")

</div>

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)](https://github.com/webpack-contrib/webpack-bundle-analyzer)

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.

---

<div class="post-metadata">

**Author:** ![Franco](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/franco/32/16275_2.png) [@Franco](https://forum.babylonjs.com/u/Franco)\
**Post date:** [May 25, 2021, 1:24am UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084/4 "2021-05-25T01:24:13Z")

</div>

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:

 ![CleanShot 2021-05-25 at 09.19.53@2x](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/9/795dd87235f94aa45b4f3323f4b28c78b948ee70.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 25, 2021, 3:07pm UTC](https://forum.babylonjs.com/t/es6-tree-shaking-build-large-bundle-size/21084/5 "2021-05-25T15:07:47Z")

</div>

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