How to reduce bundle size further?

Questions
1

Please refer to this Babylon.js starter I’m experimenting with Virtual Realms / Awesome Babylon Starter · GitLab

I’m using BJS ES6 preview release modules with TypeScript, Babel & Webpack but my builds for this basic, sample scene are still 6.9Mb for bundle.js. With tree shaking I thought I’d be able to get it down under 1Mb so I guess I’ve done something wrong.

Are there any ts, babel or webpack settings I’ve missed?

2

We are actually testing it on each build.
The current size for a complete scene is 800Kish (Babylon.js/packagesSizeBaseLine.json at master · BabylonJS/Babylon.js · GitHub)

Here is the code we use:

More precisely this one:

3

Thanks @Deltakosh. I’ll update my scene to match but I suspect the problem lies elsewhere in my config.

4

Found my mistake. Source maps in prod build.

1 Like
5

in 4.0.3 version the import { Vector3 } from "@babylonjs/core/Maths/math.vector"; not working, i use instead import { Vector3 } from "@babylonjs/core/Maths";.

@Deltakosh do you have idea whats wrong?
If I use
import { Engine } from '@babylonjs/core/Engines/engine';

instead of
import { Engine } from '@babylonjs/core';
or
import { Engine } from '@babylonjs/core/Engines';

i got error when building my app:

ERROR in node_modules/@babylonjs/core/Engines/engine.d.ts:8:10 - error TS2305:
Module '".../node_modules/@babylonjs/core/Engines/engine"' has no exported member 'IDisplayChangedEv               entArgs'.

8 import { IDisplayChangedEventArgs } from "../Engines/engine";

package.json:

{
  "dependencies": {
    "@babylonjs/core": "^4.0.3",
    "@babylonjs/loaders": "^4.0.3",
    "core-js": "^2.6.10",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@types/node": "~8.10.59",
    "ts-node": "~7.0.1",
    "tslint": "~5.18.0",
    "typescript": "~3.5.3"
  }
}
6

@inteja some tricks for you:

You can save 190 KB if will use
import '@babylonjs/loaders/glTF/2.0';
instead of import '@babylonjs/loaders/glTF';

and 150 KB more if will use
import '@babylonjs/loaders/glTF/2.0/glTFLoader';
instead of import '@babylonjs/loaders/glTF/2.0';

2 Likes
7

try with 4.1 :slight_smile:

8

I just update this:

"@babylonjs/core": "^4.0.3",
"@babylonjs/loaders": "^4.0.3",

to this:

"@babylonjs/core": "^4.1.0-rc.4",
"@babylonjs/loaders": "^4.1.0-rc.4",

and got error thousand errors like this:

node_modules/@babylonjs/core/node.d.ts:148:9 - error TS1086: An accessor cannot be declared in an ambient context.

148     set onDispose(callback: () => void);
            ~~~~~~~~~
node_modules/@babylonjs/core/node.d.ts:185:9 - error TS1086: An accessor cannot be declared in an ambient context.

185     get behaviors(): Behavior<Node>[];
            ~~~~~~~~~
node_modules/@babylonjs/core/node.d.ts:204:9 - error TS1086: An accessor cannot be declared in an ambient context.

204     get worldMatrixFromCache(): Matrix;
            ~~~~~~~~~~~~~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:156:9 - error TS1086: An accessor cannot be declared in an ambient context.

156     get environmentTexture(): Nullable<BaseTexture>;
            ~~~~~~~~~~~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:162:9 - error TS1086: An accessor cannot be declared in an ambient context.

162     set environmentTexture(value: Nullable<BaseTexture>);


node_modules/@babylonjs/core/scene.d.ts:984:9 - error TS1086: An accessor cannot be declared in an ambient context.

984     set pointerX(value: number);
            ~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:988:9 - error TS1086: An accessor cannot be declared in an ambient context.

988     get pointerY(): number;
            ~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:989:9 - error TS1086: An accessor cannot be declared in an ambient context.

989     set pointerY(value: number);
            ~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:1027:9 - error TS1086: An accessor cannot be declared in an ambient context.

1027     get totalVerticesPerfCounter(): PerfCounter;
             ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@babylonjs/core/scene.d.ts:1037:9 - error TS1086: An accessor cannot be declared in an ambient context.

1037     get totalActiveIndicesPerfCounter(): PerfCounter;

node_modules/@babylonjs/loaders/glTF/glTFFileLoader.d.ts:267:9 - error TS1086: An accessor cannot be declared in an ambient context.

267     get capturePerformanceCounters(): boolean;
            ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@babylonjs/loaders/glTF/glTFFileLoader.d.ts:268:9 - error TS1086: An accessor cannot be declared in an ambient context.

268     set capturePerformanceCounters(value: boolean);
            ~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@babylonjs/loaders/glTF/glTFFileLoader.d.ts:281:9 - error TS1086: An accessor cannot be declared in an ambient context.

281     set onValidated(callback: (results: GLTF2.IGLTFValidationResults) => void);
            ~~~~~~~~~~~
node_modules/@babylonjs/loaders/glTF/glTFFileLoader.d.ts:326:9 - error TS1086: An accessor cannot be declared in an ambient context.

326     get loaderState(): Nullable<GLTFLoaderState>;
            ~~~~~~~~~~~

Well, now I agree to larger build size =)

9

Just make sure to be on TS 3.7+ :slight_smile:

10

I don’t suppose you guys know a way to make Visual Studio Code import from these paths instead of from ‘@babylonjs/core’ automatically?

image
image805×140 10.9 KB

It looks like it knows about the thing in core/Meshes/mesh, but it decides to “Auto import from ‘@babylonjs/core’ class Mesh interface Mesh” instead.

Thank you!

11

I am pretty sure one of the import typescript setting should cover this:

image
image1696×1455 241 KB

But unfortunately, completely unsure of which one :frowning:

12

Let us know if you find a way as we should add it to the doc :slight_smile: