Seems the Inspector weight too much?

Without inspector the weight of my application (with babylonJS) total is 1.85 MB, but with these imports:

import '@babylonjs/core/Debug/debugLayer';
import '@babylonjs/inspector';

it is 9.75 MB.

Is it ok? Is it expected result?

The part of inspector in my bundle doesn’t look optimized (except for everyone else code parts in the bundle):


Or is there another way to import Inspector without this legacy.js part?

Core, gui, and inspector combined was 4.2mb last time i checked. I suggest setting up a single file importing from those three and check the bundle output, then go from there

why not just disable their usage based on production or dev ?

Ok, thanks, 4 MB is also too much for me.
I can’t disable it, it is main feature on production :smiley:

use dynamic import)

Or like this:

export async function addInspectorForScene(scene: BABYLON.Scene) {
  const switchDebugLayer = () => {
    if (scene.debugLayer.isVisible()) {
    } else {{ overlay: true });

  // hide/show the Inspector
  window.addEventListener('keydown', async ev => {
    // Shift+Ctrl+Alt+I
    if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
      const debuggerScript = document.querySelector('script[inspector]');

      if (!debuggerScript) {
        console.log(`Start loading inspector...`);
        const s = document.createElement('script');
        s.setAttribute('inspector', 'true');
        s.src = '';

        s.onload = () => {
          console.log(`Inspector loaded!`);
        s.onerror = () => {
          console.log(`Inspector failed to load`);


Amazing! Bookmarked!

1 Like