Inspector: load missing BabylonJS core parts from CDN

Questions
1

Hi folks,

I am using BabylonJS npm packages in my project and try to keep the import instructions as detailed as possible to minimize the final output bundle size, which generally works fine.
eg: import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';

Now the inspector comes into play and things are getting tricky, since you need the whole BJS core on top of the inspector itself, which results in a huge file size increase.
Unfortunately code splitting is not an option for me, as the output will be uploaded on a platform which only excepts one single JS file…

So I tried to load the required code from the web, as already discussed in this thread.
However I got it working using this code:

await import(/* webpackChunkName: "fullcore" */ '@babylonjs/core/Legacy/legacy');
DebugLayer.InspectorURL = 'https://cdn.jsdelivr.net/npm/babylonjs-inspector@6.22.0/babylon.inspector.bundle.max.min.js'; // optional
myScene.debugLayer.show();

AFAIK the @babylonjs/core/Legacy/legacy import creates the BABYLON namespace, that is required for the legacy packages to work.
Still this import takes about 2,4 MB, which bloats the output file very significantly.

So I tried to import the missing BJS core parts from the web as well, using:
await loadJavascript('https://cdn.jsdelivr.net/npm/babylonjs@6.22.0/babylon.js')
The inspector kinda works, but I get errors on certain actions.
For example when clicking on the top level “Scene” node, the following error occurs:

image
image696Ă—339 17.9 KB

The issue seems to be that the getPhysicsEngine function is available in the imported BABYLON.Scene.prototype object, but not in the original Scene.prototype from the npm package.
And I guess that’s just the tip of the iceberg. :face_with_diagonal_mouth:

I know that it’s not really the intended way of loading the inspector, but if anyone has some tips or workarounds for me I’d be very glad.

2

ccing @RaananW our build wizard :mage:

3

Just for meto understand - what you are trying to do is to get a way to not add the inspector to the file you are actually serving, while still having it load the inspector when needed?

Why not use the UMD directly instead of the es6 package? This way it will work out of the box. The inspector UMD version was not meant to work with the es6 package. It will have issues with the other dependencies.

4

@RaananW because I’d lose the possibility of tree shaking.
I guess it will be quite the same result as using the legacy import with the ES6 package.
await import(/* webpackChunkName: "fullcore" */ '@babylonjs/core/Legacy/legacy')

5

loading from @babylonjs/core or from Legacy will load the entire framework and tree-shaking will not really work as you expect it to be.

Have you tried async-loading the inspector and have your bundler build a package for both core and the inspector (and its dependencies)?

1 Like
6

@RaananW
I tried it in a project and it generally works fine.
Unfortunately I can only serve one JS file due to the limitations of the platform I am using.
So everything that should be lazy loaded has to come from CDN.

Nevertheless maybe we can find a solution on the platform itself.

1 Like