Treeshaking core/flowgraph?

Questions
1

Hi,
I have noticed that the size of core/flowgraph module is gradually growing over time. For example between the version 7.51.0 and 7.52.0, it got more than twice as big (123kB → 309kB, according to BundleAnalyzer). While this sure means there are more features now, I’m slightly worried of this trend which is increasing the final size of bundle.

Since I dont observe any difference in functionality in my project between the aforementioned versions, I might be convinced that I dont need most of the core/flowgraph anyway. So maybe Is there any way how to treeshake the module while still keeping support for gltf models in my project? :thinking:

I have tried to trim it via resolve.alias in webpack config, but it produces an error:

resolve: {
    alias: {
      "@babylonjs/core/FlowGraph": false,
    }
}

the bundle size can be observed with the project template from Raanan:
$ git clone https://github.com/RaananW/babylonjs-webpack-es6/

diff --git a/src/createScene.ts b/src/createScene.ts
index ebfe4c4..a4c8e39 100644
--- a/src/createScene.ts
+++ b/src/createScene.ts
@@ -3,6 +3,7 @@ import type { Scene } from "@babylonjs/core/scene";
 // Change this import to check other scenes
 import { DefaultSceneWithTexture } from "./scenes/defaultWithTexture";
 import { AbstractEngine } from "@babylonjs/core/Engines/abstractEngine";
+import { LoadModelAndEnvScene } from "./scenes/loadModelAndEnv";

 export interface CreateSceneClass {
     createScene: (engine: AbstractEngine, canvas: HTMLCanvasElement) => Promise<Scene>;
@@ -14,5 +15,5 @@ export interface CreateSceneModule {
 }

 export const getSceneModule = (): CreateSceneClass => {
-    return new DefaultSceneWithTexture();
+    return new LoadModelAndEnvScene();
 }
diff --git a/webpack.common.js b/webpack.common.js
index 00b42e7..1c472e1 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -2,7 +2,7 @@ const path = require("path");
 const fs = require("fs");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

 // App directory
 const appDirectory = fs.realpathSync(process.cwd());
@@ -55,7 +55,7 @@ module.exports = {
         ],
     },
     plugins: [
-        // new BundleAnalyzerPlugin(),
+        new BundleAnalyzerPlugin(),
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
             inject: true,

$ npm install @babylonjs/core@7.51.0 @babylonjs/loaders@7.51.0
$ npm run start
// check the flowgraph size

$ npm install @babylonjs/core@7.52.0 @babylonjs/loaders@7.52.0
$ npm run start
// check the flowgraph size

Thanks.

2

Core/FlowGraph should have no reference from within core, so it should be tree-shaken out, if you import from the right modules.
Unless I missed something, and in this case I will fix it asap.
I assume you are importing directly from @babylonjs/core?

**EDIT - could be a reference from loaders. how are you loading the loaders package?

3

Thanks for your response.

I assume you are importing directly from @babylonjs/core?
how are you loading the loaders package?

I’m careful to not import anything directly from core, so this shoudn’t be the case. My import same as in your template, ie.:

import "@babylonjs/loaders/glTF";

1 Like
4

This needs to be updated with the dynamic extensions support, i guess. You also don’t need glTF 1.0, which is included here as well. let me see if I can update the template really quick and test it.

You should not have interactivity/flowgraph loaded, unless you need it.

1 Like
5

ok, I just made an update to the template. try changing the import to:

import "@babylonjs/loaders/glTF/2.0/glTFLoader";

This will avoid loading any glTF extensions. If yuo do need a glTF extension you can import them individually, or use the dynamic registerBuiltInGLTFExtensions function that will async-load them when they are needed (and generate chunks for them)

3 Likes
6

import "@babylonjs/loaders/glTF/2.0/glTFLoader";

Yup, that helps. Thanks again.