[Babylon.js Vite] Inspector(デバッグツール)を本番環境ではバンドルさせない方法

概要

Babylon.jsの便利ツール「Inspector」
わずか数行書き足すだけでデバッグがとても簡単になります。
ただし、これを含めてビルドするとバンドルサイズが跳ね上がります。
開発環境では有効にしつつ、本番環境ではバンドルに含めない方法を紹介いたします。

コード

JSX

import { Engine } from "@babylonjs/core/Engines/engine";
// その他いろいろインポート
// ここでは@babylonjs/inspectorをインポートしない

const BabylonScene = () => {
  const canvasRef = useRef(null);
  // 省略

  useEffect(() => {
    const engine = new Engine(canvasRef.current, true);
    // その他Babylon.jsの構成
    
    // 開発環境であれば@babylonjs/inspectorをインポート
    if (import.meta.env.DEV) {
      import("@babylonjs/inspector")
        .then(() => {
          if (scene.debugLayer) {
            scene.debugLayer.show({
              embedMode: true,
            });
          }
        })
        .catch((err) => {
          console.error("Inspectorの読み込みに失敗しました。:", err);
        });
    }

    return () => {
      engine.dispose();
    };
  }, [canvasRef]);

  return <canvas ref={canvasRef}></canvas>;
};

※ viteの環境変数について
https://vite.dev/guide/env-and-mode