Minimizing Babylon/core bundle size

Questions
1

Am I missing something to make my bundle size smaller, or does this look right?

development size in webpack is now 7,26MB just for core. I think minimized production size is still 2,5+ MB.

These are the imports I’m doing, I just now changed them all to submodule imports, but that did not change anything:

import { Scene } from ‘@babylonjs/core/scene’;
import { Mesh } from ‘@babylonjs/core/Meshes/mesh’;
import { Sound } from ‘@babylonjs/core/Audio/sound’;
import { Engine } from ‘@babylonjs/core/Engines/engine’;
import { Camera } from ‘@babylonjs/core/Cameras/camera’;
import { Color3 } from ‘@babylonjs/core/Maths/math.color’;
import { Vector3 } from ‘@babylonjs/core/Maths/math.vector’;
import { Observable } from ‘@babylonjs/core/Misc/observable’;
import { FreeCamera } from ‘@babylonjs/core/Cameras/freeCamera’;
import { MeshBuilder } from ‘@babylonjs/core/Meshes/meshBuilder’;
import { AbstractMesh } from ‘@babylonjs/core/Meshes/abstractMesh’;
import { PolygonMeshBuilder } from ‘@babylonjs/core/Meshes/polygonMesh’;
import { UniversalCamera } from ‘@babylonjs/core/Cameras/universalCamera’;
import { DynamicTexture } from ‘@babylonjs/core/Materials/Textures/dynamicTexture’;

babylon
babylon1429×775 126 KB

2

This is really strange cause here you pool everything not just the tree shooked part. Like sound or CSG.

Could you share your project ?

3

I sent you an invite

4

Perfect I ll have a look into it shortly.

5

I am still seeing lots of import { Scene, Engine } from “@babylonjs/core”; which will pull the entire tree in your app. Are your changes on a special branch ?

1 Like
6

wow, I’m stupid… and so is the whole single/double quote situation in javascript ;p

Thanks, now it’s 2.86MB!

1 Like
7

just 2 things are now not working, maybe you already know what to do:

  1. scene.disableDepthRenderer(); (not sure how to import this from depthRendererSceneComponent.ts)
  2. Engine.audioEngine === undefined, eventhough I import Engine
8

You could have a look here ES6 - Babylon.js Documentation to better understand the reason and it also references most of the problematic side effects.

In your case I guess you need:
import “@babylonjs/core/Rendering/depthRendererSceneComponent”;
import “@babylonjs/core/Audio/audioSceneComponent”;

3 Likes
9

Hi @mise, I am wondering what tool did you use to create this view?

It will be so helpful for each one of us trying to have the smallest bundle size possible.

Thanks a lot, Pichou

10
11

Thanks @sebavan, I am using parcel but seems like there is the same visualizer: