Babylon.js tree shaking

[rasmuserik]

The distribution size is reduced significantly when loading the babylon modules individually, rather than including the entire babylon.js. For a production build of docs/hello-world the total size reduces from 2.5MB to 1MB.

Would you like a pull-request to noa, where it depends on @babylonjs/core, and imports that with import instead of require?

Otherwise I'll just continue as I do now by creating a custom window.BABYLON in my code, – and I might add some notes here about how to do that, in case others want to do the same.

[fenomas]

Hi, yes, some BJS folks have asked me to support this and I'd like to do it properly! But I'm not sure how best to go about it.

First, note that I've just pushed a build to the develop branch to lay the groundwork for this - it now lets you pass in a babylon.js reference, rather than assuming it will be in global. I.e.:

var noaEngine = require('noa-engine')
var babylonJS = require('babylonjs')
var noa = noaEngine({
    babylon: babylonJS,
})

Now with that said, the problem currently with import is that noa treats babylon as peer dependency - that is noa doesn't import anything from Babylon directly, but various noa modules do new BABYLON.Vector3 and whatever. So I guess, the easiest way to do what you're talking about, today, would be for the game client to import only the specific classes noa uses and pass them in:

import { Engine } from '@babylonjs/core/Engines/engine'
import { Scene } from '@babylonjs/core/scene'
import { Vector3 } from '@ babylonjs/core/Maths/math'
// .. and all the other classes noa needs

var noa = noaEngine({
    babylon: {
        Scene,
        Engine,
        Vector3,
        // ...
    }, 
})

I assume this would work but it's not a nice solution. The alternative would be for noa to just declare a direct dependency on Babylon and import whatever classes it uses. However I guess this might make life difficult for a user who wants to use noa with a newer version of BJS, or with other BJS features that noa doesn't use.

Is your solution the same as one of those, or do you see other alternatives?

[rasmuserik]

Another option would be to declare @babylonjs/core as a peer depency in the noa's package.json as shown in this branch. Feel free to merge it if you want that approach, – otherwise I'll just pass the babylon modules as a parameter to noa, which works fine for me :)

[fenomas]

Hey, thanks for that link! It looks like I should do exactly that. I should probably also switch the rest of the code from require over to import - I've been meaning to do that eventually but didn't have a reason.

I'll work on this, thanks!

[fenomas]

@rasmuserik

I dove into this and it's working, but there were some complications. As a result I have pushed a branch to this repo that now uses @babylon/core as a peer dep, but I also had to move the example contents into a separate repo:

https://github.com/andyhall/noa-examples

Can you do me a huge favor, and try pointing your project at the noa branch #es6-modules-babylon-as-peer, and see if everything builds as expected? You will need to set your dependencies similarly to what's in the noa-examples repo, like:

    "dependencies": {
        "@babylonjs/core": "^4.0.3",
        "noa-engine": "github:andyhall/noa#es6-modules-babylon-as-peer"
    },

Since these are big changes I'd really like to confirm that it works for someone besides me :grin:

Thanks!

[rasmuserik]

It works :) Thanks!

(sorry about the late reply, – I was on vacation)

[fenomas]

Cheers mate!

I will push a release pretty soon.

[fenomas]

This is pushed to #master and also npm as v0.26.0.

Let me know if anything breaks!