Seems the Inspector weight too much?

[Dok11]

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?

[jeremy-coleman]

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

[steelx]

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

[Dok11]

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

[Alexander_Sosnovskiy]

use dynamic import)

[Alexander_Sosnovskiy]

Or like this:

export async function addInspectorForScene(scene: BABYLON.Scene) {
  const switchDebugLayer = () => {
    if (scene.debugLayer.isVisible()) {
      scene.debugLayer.hide();
    } else {
      scene.debugLayer.show({ 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 = 'https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js';

        s.onload = () => {
          console.log(`Inspector loaded!`);
          switchDebugLayer();
        };
        s.onerror = () => {
          console.log(`Inspector failed to load`);
        };
        document.body.appendChild(s);
        return;
      }

      switchDebugLayer();
    }
  });
}

[Dok11]

Amazing! Bookmarked!