docs: lazy load @babylonjs/inspector

Author: Deyang-Dai

README.md

@@ -38,8 +38,6 @@ npm install @amazon/lib-3d-scene-viewer
 [Take a look at an example](src/dev/v3dViewer.ts)
 
 ```ts
-// Needed for BabylonJS debug layer
-import '@babylonjs/inspector';
 import { Config } from '@amazon/lib-3d-scene-viewer/config/config';
 import { Model } from '@amazon/lib-3d-scene-viewer/model/model';
 import { Scene } from '@babylonjs/core/scene';
@@ -161,7 +159,10 @@ import { V3DScene } from '@amazon/lib-3d-scene-viewer/scene/v3dScene';
         const key = event.key;
         // Pressing '?' should show/hide the debug layer
         if (key === '?') {
-            v3dScene.toggleDebugMode();
+            // Needed for BabylonJS debug layer
+            import('@babylonjs/inspector').then(() => {
+                v3dScene.toggleDebugMode();
+            });
         }
     });
 })();

src/dev/v3dViewer.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import '@babylonjs/inspector';
 import { CubicEase } from '@babylonjs/core/Animations/easing';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { DracoCompression } from '@babylonjs/core/Meshes/Compression/dracoCompression';
@@ -156,7 +155,9 @@ function createHelperText(): HTMLDivElement {
         const key = event.key;
         // Pressing '?' should show/hide the debug layer
         if (key === '?') {
-            v3dScene.toggleDebugMode();
+            import('@babylonjs/inspector').then(() => {
+                v3dScene.toggleDebugMode();
+            });
         }
     });
 })();

webpack.config.mjs

@@ -39,6 +39,11 @@ export default (env, argv) => {
             filename: '[name].bundle.js',
             clean: true,
         },
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+            },
+        },
         resolve: {
             extensions: ['.tsx', '.js', '.ts'],
         },