Very large app.js file size due to inclusion of Inspector & Guieditor in production code

[evidanary]

Hello all I’m using npm, webpack and es6 modules to create an app.js that will be shipped to the client. Everything’s working fine, except for the app.js file size. It is massive - 10 MB minified .

A look at the stats reveals that the largest contributors are inspector and guieditor.

I’ve followed instructions from the ES6 babylon documentation Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation and also looked at other posts Babylon.js bundle size - #3 by hxxngvx . However, I’m not able to pinpoint why my PRODUCTION bundle is including “Inspector” and “GUIEditor” when I’m not using those at all.

I import the inspector only when I’m in development mode in my app.js. Is there any way to pinpoint which line of code in my project is causing these 2 massive libraries to get loaded?

Here is where I’m loading the inspector

Here are the module sizes outputted during “npm run production” which creates the bundle

Here are my imports in package.json

[evidanary]

cc @RaananW

[bigrig]

Hard to say without seeing all your imports and webpack configs, but what happens if you comment out that import line all together? My hunch is that there’s some other place in your imports where you’re bringing it in? (assuming you don’t see that console log in prod?)

Btw, b/c of the massive amount of time it adds to the build process, i just started to load the inspector in from html instead of including in the build - and then comment out those lines when pushing to prod.

[slin]

@evidanary

npm run production

What is your production command look like in package.json? Are you sure it sets NODE_ENV environment variable to production? Otherwise your config look good to me. I have something similar works in my project.

[evidanary]

@evidanary

ector only when I’m in development mode in my app.js. Is there any way to pinpoint which line of code in my project is causing these 2 massive libraries to get loaded?

It is webpack --config configuration/webpack.prod.config.js --mode=production

Here is the prod webpack config

[evidanary]

@bigrig

orts and webpack configs, but what happens if you comment out that import line all together? My hunch is that there’s some other place in your imports where you’re bringing it in? (assuming you don’t see that console log in prod?)

Btw, b/c of the massive amount of time it adds to the build process, i just started to load the inspector in from html instead of including in the build

@bigrig that worked. Commenting out the below code worked and brought the app size down to .

        if(AppConstants.SHOW_DEBUG_INFO && process.env.NODE_ENV !== 'production') {
            console.log('Application started are in DEVELOPMENT MODE!');
            import("@babylonjs/inspector").then(
                ({ default: _ }) => {
                    scene.debugLayer.show();
                }
            );

The new minfied size is 3.5 MB. Under 1 MB gzipped.

Would be nice to get the conditional import working though.

[bigrig]

@evidanary

process.env.NODE_ENV

Be sure to check that var ^
It’s a tricky one to get to set correctly in node.
Are you setting it from your command line before running the build?