Import only used classes: how to find their path?

[Fenryll]

Hi,

Sorry if this is a stupid question, but now that I am about to push an alpha version of my new game in production, I find that my bundle size is quite big…

So I was thinking to import only the classes I am using from babylon and would like to know if there is a correct and straight forward way to find their path ?

I found some of them directly in the @babylonjs\core folder, for others I had to dig a bit wihtin folders, did some “find in files” with notepad++, but, this is not yet working (don’t really know for example the path to Vector3… should be around @babylonjs/core/Maths/math.vector …)

Here are my deductions so far…

import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcrotateCamera';
import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
import { ParticleHelper } from '@babylonjs/core/Particles/particleHelper';
import { Texture } from '@babylonjs/core/Materials/Textures/texture';
import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem';
import { Color4 } from '@babylonjs/core/Maths/math.color';
import { Color3 } from '@babylonjs/core/Maths/math.color';
import { CubicEase } from '@babylonjs/core/Animations/easing';
import { EasingFunction } from '@babylonjs/core/Animations/animation';
import { Animation } from '@babylonjs/core/Animations/animation';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
import { Mesh } from '@babylonjs/core/Meshes/mesh';
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
import { Plane } from '@babylonjs/core/Maths/math.plane';
import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';

[sebavan]

I am usually using the Babylon repo locally to see where the files are from cc @RaananW for ideas

[RaananW]

Yeah, that’s an interesting issue and a wonderful topic to discuss TBH.
This is what I do - I first start with importing everything I need from @babylonjs/core. During development I am mainly focused on code and less on optimizations. After I am done (or maybe half-way through ) I remove all of the imports and then go to the missing imports one by one in my IDE ( I personally use VSCode), and ask it to import it. VSCode will then show where it can load this specific module from. This is where i choose the right file.

It gets interesting when you need to load a scene component or a file that you don’t need directly as a module, but require its side effects. Babylon will usually inform you of the module that is missing, but if this doesn’t work, i search in the github repository for the missing component (unless I know exactly what is missing).

It’s not optimal, to say the least. i’m sure other have their own way of doing this.

[Fenryll]

Thanks

Babylonjs/core is “almost” working…

As soon as I add to the import one or both of these two:

import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcrotateCamera';
import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';

I have that error in my console while trying to npm run dev my vue3 / vite application…

But, despite these scary red errors, I can then use the game in the browser without any error displayed in the js console…

any idea why ? And what if I can still run the thing… ??

[Fenryll]

So… it was vite related for sure… after I toyed a bit in the vite.config to fix another issue, it all disappeared

[RaananW]

Great! I’m happy it’s working now. And believe me, i know the frustration with those build systems

[Fenryll]

Before / after

[RaananW]

love to see that. Makes me feel happy you managed to reduce it to ca. 650kb gzipped.