Is there way to reduce size of babylon js file?

I am building simple web application for shops where admin can load models and show them on product page. I use three js now and it’s ok. But I found that Babylon is more easy to use and it has material builder. But one thing is confusing me. Babylon.js file is almost 3mb size. This is really too big for any speed test tool. All scripts and libraries on whole site have less size than just one file of babylon. Three js has 500-600kb, this is also too big but not critical.

Is there way to get reduced version for web?

P.s. I saw ES6 version but in my project I can’t use scripts in module format

I think it’s due to gzip, but on FTP I use, BJS is near 500kB.

Example (BJS v3.3.0 here), these are the same files:

You could in your project create a sub one where you use es6 to create your own Babylon based on your need and then reuse this instead of our bundle containing everything.

I saw next tutorial https://doc.babylonjs.com/features/es6_support But it doesn’t have names of modules and doesn’t have tutorial how to make custom pack. As I understand, I can only use ES6 syntax like

import {
Engine
} from "@babylonjs/core/Engines/engine";
import {
Scene
} from "@babylonjs/core/scene";

But whole file is still loaded on frontend. What I need is custom js file which I can include in code. For example, I need only scene loader + core + material builder, environment. How can I know what must be imported and how to merge them via webpack?

We basically create in Babylon our main bundle through webpack so you could do the same by simply reexporting the entities you need from babylon es.

You could compile it as umd in webpack so that you could recreate this file from your app.

Your bundle will then contain only what you need.

I followed example https://doc.babylonjs.com/features/es6_support and I can’t see how it works.

I installed core, material and loaders in npm, installed webpack, created folder babyjs, placed index.html file as in example, created folder src with file index.js and placed code as in example, run webpack - compiled was successfully.

Opened http://localhost:8080/babyjs/ - I see error in console

GET http://localhost:8080/babyjs/main.js net::ERR_ABORTED 404 (Not Found)

also, I don’t see any generated files, it’s not clear where they are stored

You should have a quick look at the webpack doc to better understand the role of the bundlers and how to configure them:

1 Like

this doesn’t answer my questions. Currently, I tried to replicated everything from your ES6 tutorial, everything is generated but this doesn’t show me any results, so, currently tutorial is not clear.

From webpack docs

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

There is no folder dist in my home directory. I created it, run webpack again, I see that Image 2020-03-18 at 5.32.43 PM and still don’t see any main.js files. and index.html still show me error

Ok. I found wrong code in docs

npx webpack-dev-server

this is not correct way to build files. This will make files in memory but not on disk

Correct is

npx webpack

Now, I see main.js file. It’s 750kb which is much better.

Still is not clear where I can get all names and paths. In example we have

FreeCamera

import {
    Vector3
} from "@babylonjs/core/Maths/math";
import {
    FreeCamera
} from "@babylonjs/core/Cameras/freeCamera";
import {
    HemisphericLight
} from "@babylonjs/core/Lights/hemisphericLight";
import {
    Mesh
} from "@babylonjs/core/Meshes/mesh";

But it’s not clear where I can find all these import names and paths. Do they affect compiled js file size?

This is why the webpack doc would help. The example is how to organize and run code locally with ES6 not how to fully build your app as this is more related to the bundler usage than the babylon integration.

About path, this is the annoying one :frowning: you would need to look in the sources on github where they are… I hope we can improve the doc for this at some point.

As long as you target individual files, you will be at the optimal bundle size.

I played a bit. Ok, as I understand, webpack doesn’t create separate files, it just merge and minify everything into one file with all dependencies. I tried to import required modules and build main.js file, then, replace

<script src="https://preview.babylonjs.com/babylon.js"></script>

with compiled main.js. this simply doesn’t work because webpack doesn’t create ES5 compatible files. In current point I will return to three js as they provide both ways - as ES5 standalone files and ES6 modules with better documentation. But I will follow to Babylon and maybe will give it next try in future

Have updated docs to show that you can create dist folder using npx webpack

1 Like

So sad to see you go for this. It should just all works here if you ask webpack to generate a lib of your chosen name in a umd output:

    library: 'someLibName',
    libraryTarget: 'umd',

then in your code you can use someLibName.xxx where xxx would be any of your entry point exports.