Is there way to reduce size of babylon js file?

Questions
1

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

2

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:

image
image760×468 27.7 KB

3

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.

1 Like
4

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?

5

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.

6

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

7

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
8

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

9

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?

10

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.

11

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

12

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

1 Like
13

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.

14
  1. Sorry to reanimate this 3-year old corpse, and 2) long-time reader/learner, first-time poster

Like OP, I just want to slim down the main library’s .js file I load via into a site, and I have followed the directions for ES6/NPM, which are clear enough, but I can’t get the webpack exported to /dist to work on it’s own when I load via a tag.

I can’t seem to find any other more recent posts that speak to this (see point 1 above).

In my webpack.config.js file I have tried the solution listed here…

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

along with using a library object, and neither seem to give me something that works.

It doesn’t seem that just targeting UMD in this way is enough.

For now, while I’m sussing this out, I am only loading the Engine. I have import { Engine } from "@babylonjs/core/Engines/engine"; as the only line in my index.js (entry point for webpack) and then in my site I load the file webpack exports as a in my html and try to spin it up with var engine = new someLibName.Engine(canvas, true);. I just get a “someLibName (or someLibName.Engine) is not defined” error.

Admittedly this is the first time I have ever used npm or webpack so I could be doing something fundamentally wrong, but I assume I’m just missing a line in the config or something.

When I compare the main babylon.js file against the one I export (with just Engine), it appears the library name (BABYLON) is used throughout the complete babylon.js whereas in the web pack export I am using, it only appears a couple times at the start.

Appreciate any help locating more resources to read, or a basic solution as to why I can’t get a UMD JS file to work.

15

Your issue is not with Babylon here but more with the way webpack creates bundles and how to consume them. It is not because you import Engine that it will be available in your lib. Only functions/variables you export will be available on your library but here you export nothing.

I would recommend to either put the code in your lib after the import or reexport the things you need.

You should try to have a deeper look at how webpack and js are working with modules import/export and similar. This would help you a lot.

1 Like
16

Thank you.

While I would love to learn webpack, I’m only using it for this one particular case, trying to get babylon.js smaller. The babylon docs do a great job leading a npm/webpack noob up to the point they have their ES6 modules running. But the step I need after that, getting that packed into a .js file to just stick in a tag, that step is eluding me, and the OP apparently.

Anybody have a quick tip, maybe something that could end up as a paragraph in the documentation, as to how to bridge the gap and get a script we can load up as a tag, old-fashioned style, and use in our code, with someLibName.Engine or someLibName.Vector3, etc?

In the meantime, I’ll definitely dive into the webpack docs.

Thank you.