Babylon.js bundle size for reasonably minimal project?

Questions
1

Hi,

I have a project that uses Babylon reasonably minimally - just scenes and meshes and textures, no animations or loaders etc. I recently updated it to Babylon 4.2, and noticed that the bundle size, for babylon libraries only, is about 3.2MB (unzipped).

Is this normal? My vague recollection is that when I started using Babylon the unzipped size was around 500k.

Details: I am building with webpack 4, production mode, with tree-shaking etc. The babylon libraries I’m importing are:

import { Scene } from '@babylonjs/core/scene'
import { Engine } from '@babylonjs/core/Engines/engine'
import { Mesh } from '@babylonjs/core/Meshes/mesh'
import { SubMesh } from '@babylonjs/core/Meshes/subMesh'
import { Texture } from '@babylonjs/core/Materials/Textures/texture'
import { VertexData } from '@babylonjs/core/Meshes/mesh.vertexData'
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial'
import { MultiMaterial } from '@babylonjs/core/Materials/multiMaterial'
import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera'
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight'
import { Octree } from '@babylonjs/core/Culling/Octrees/octree'
import { OctreeBlock } from '@babylonjs/core/Culling/Octrees/octreeBlock'
import { OctreeSceneComponent } from '@babylonjs/core/Culling/Octrees/'
import { Vector3, Color3 } from '@babylonjs/core/Maths/math'
import { SolidParticleSystem } from '@babylonjs/core/Particles/solidParticleSystem'
import '@babylonjs/core/Meshes/meshBuilder'

The bundle analyzer graph looks like this:

bundle analyzer graph
bundle analyzer graph2518×1366

Thanks!

2 Likes
2

That one is for @sebavan!

1 Like
3

It should be smaller than what you see here, actually way smaller.

Here I can most of the babylon code like XR AUDIO of all the materials and camera. This is like you are not tree shaking at all.

4

Is there a known-good project somewhere, with webpack config and import code and working tree-shaking, that one could compare their source to?

5

You could have a look at what I did here:

Maybe your ts config does not target esnext import styles preventing webpack to tree shake ?

1 Like
6

Thanks, I found the problem… not config or anything, just an old debug file with an import * as BABYLON statement and that was pulling everything in. :frowning:

2 Likes
7

Hi, I spoke too soon on this. Even after removing the over-broad imports, I was still getting very large file sizes when using simple imports like:

import { VertexData, VertexBuffer } from '@babylonjs/core/Meshes'

After much pain, it turns out that the solution is that every import needs to be fully specified, like:

import { VertexBuffer } from '@babylonjs/core/Meshes/buffer'
import { VertexData } from '@babylonjs/core/Meshes/mesh.vertexData'

Super annoying, especially as VScode doesn’t always figure out where the import should come from… :frowning:

8

Yup but due to back compat we can unfortunately not specify the package as side effects false as it would be required :frowning:

12

Hi @sebavan

Can we have a non-backward compatible release version? :sob:

Happy Friday!

13

Running into the same thing. I am doing:

import { 
    CubeTexture, Texture, ArcRotateCamera, Engine, 
    HemisphericLight, Vector3, Scene, MeshBuilder, 
    Color3, StandardMaterial
  } from '@babylonjs/core';

Which i’m guessing from the thread above is actually just importing all of the core at 9.37mib. Sounds like the solution is specifying the path to the specific library. But to your question above @fenomas, how do you figure out what the path is? I was digging around the node modules, but it wasn’t always obvious what path you need for which import. Like how did you know that VertexData needed ‘@babylonjs/core/Meshes/mesh.vertexData’? Is there a map somewhere?

thx

1 Like
14

I think that, for example, to import from Mesh/xxx one can have a look at Babylon.js/packages/dev/core/src/Meshes at master · BabylonJS/Babylon.js · GitHub to see all available ‘small’ imports.
It works not for all cases, for example, it will not work for NodeMaterial.

15

cc @RaananW

16

Or, i guess a better example of one that is hard to find is your other one:

import { VertexBuffer } from '@babylonjs/core/Meshes/buffer'

If you search through the @babylonjs node_modules dir by name “VertexBuffer”, there’s none that match by name. And if you search by content, there are too many matches to be useful.