Babylon React Native and Rollup

Questions
1

Hi!

I’m trying to use Rollup to bundle a small sample scene I’ve made with Babylon React Native. I did manage this, but when looking at the bundle I noticed that my files were over 200.000 lines long.
I was thinking I did something wrong that made it include a whole lot more than it needed and stuff I never use.
But then I found this: Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation
which said: “As a result, it is impossible for Webpack and the other bundlers to determine if imports are safe to be removed when not used so if you import directly from index, all the imports will be followed and included in your packages.”

Does this mean that my bundle cannot be smaller than 200.000 lines? Or am I doing something wrong in my configuration?

2

Ah I see, if I do

import { Camera } from "@babylonjs/core/Cameras/camera";
import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { DeviceSource, DeviceSourceManager } from "@babylonjs/core/DeviceInput/InputDevices/deviceSourceManager";
import { DeviceType, PointerInput } from "@babylonjs/core/DeviceInput/InputDevices/deviceEnums";
import { Nullable } from "@babylonjs/core/types";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";

instead of

import {
    ArcRotateCamera,
    Camera,
    DeviceSource,
    DeviceSourceManager,
    DeviceType,
    Nullable,
    PointerInput,
    Scene,
    TransformNode,
    Vector3
} from "@babylonjs/core";

The package is a lot smaller. Currently at 50.000 lines and it seems to be missing some stuff still. Is this the kind of package size that’s to be expected? It still seems like a lot.

Ah, so it seems you also have to add
import {_forceSceneHelpersToBundle} from "@babylonjs/core/Helpers";
to as the name suggest force that to bundle, otherwise I get an
e.createDefaultCamera is not a function
But that bloated it back to 100.000 lines.

3

You could normally simply do import “@babylonjs/core/Helpers”; to trigger side effects only.

All should be detailed here: https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking

The number of line is not really relevant as there might be comments and such the parsed size is the really impactful number in term of load time as well as the gzipped one for network.

About createDefaultCamera, this is part of helpers which pulls a lot. In case you want to minify as much as you can, you should try to manually import and create your camera of choice instead :slight_smile:

1 Like
4

Ah I see, thanks I’ll look into creating my own camera then!

1 Like