Babylon.js bundle size for reasonably minimal project?

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:

Thanks!

2 Likes

That one is for @sebavan!

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.

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

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

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:

1 Like

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:

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

Hi @sebavan

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

Happy Friday!