Issue with vue es6 file size of inpector and gui-editor?

Questions
1

hi All

So I did a production build now to test some of my new work and noticed the js chunk size was huge , like over 10mb. I then grabbed a bundle analizer plugin to check whats happening ,

so from this i can see something in webpack is not producing the gzipped files , that i have to reseach how to do that , i thought it did everything at a optimal rate automatically… sigh

My file size reflects the “parsed” size shown in this tool 10.69mb , the gzipped size would be 2.54mb

anyway what is concerning is to note the size of

babylon.inspector.bundle.max.js
babylon.guiEditor.max.js

making up such a large part of the chunk, over 50% actually , even for the gzipped size. This is only to have use of the inspector.

I know they can be removed in production but its weird they are soo big … bigger than the engine?

screenshot showing parsed sizes :

image
image1920×1040 142 KB

gzipped sizes

image
image1920×1040 153 KB

2

geez build tools really get to me still haha , install this to check whats happening , revert back to do some work … oh now the normal build has broken ,

cant find @babylonjs/gui , cant find @babylonjs/gui-editor , cant find @babylonjsjs/serializers and for good measure something else from bootstrap @popperjs/core

it worked before , I analyzied project , then this , so that can only mean the analyzer tool broke something.

so i had to npm install all those now again

anyway , now it works again and im getting some gzipped files… :wink:

ps… info about those big babylon inspector stuff would still be great , im a build tools noob , im not even sure why im getting guiEditor? im not using it?

I had to use these imports to use the inspector :

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

is this causing guiEditor to be included?

3

You can have a look at how I am code splitting the debug part here BabylonjsInkSample/inkCanvas.ts at de0896b437a7caaa44c01763214f9a03394330c5 · sebavan/BabylonjsInkSample · GitHub

Basically all the debug stuff are going in a separate chunck never slowing down the main use case unless I need them :slight_smile:

Inspectore unfortunately needs to import ALL of babylon explaining the large footprint. We could potentially code split inside it but it would be a hassle for none es builds knowing it is mostly use in debug.