Our development team is somewhat new to Angular, Node, and BabylonJS. While trying to optimize our Angular application, I noticed that the largest part of the bundle was the drawing code that included the BabylonJS imports. I started researching it and found the es6 documentation. We had originally installed the babylonjs npm packages and built everything around that. I removed them, installed the @babylonjs packages, and changed the import statements. I was pleasantly surprised to see the size of our drawing code drop from 4.56 MB to 730kB.
This leads me to believe we had been using the wrong packages. I’m sure someone on my team will ask me, so can anyone explain to me what the difference is between the babylonjs npm packages, and the @babylonjs packages? It seems like the @babylonjs packages are es6 and support tree shaking. If these packages give you a smaller bundle size, why does the BabylonJS team maintain two sets of npm packages, and why would someone choose to use the babylonjs packages instead of the @babylonjs packages? Thanks.
I think to maintain backwards compatibility. Although there is a legacy export- all of the side effects imports are needed in the ‘@babylonjs’, so that’s what I think, but never asked!
I believe is related to changes in the JS/NPM ecosystem over time and the Babylon team wanting to maintain complete backwards compatibility. There is no functionality difference between the babylonjs(UMD) npm and @babylonjs(ES6) npm packages. The @babylonjs(ES6) npm packages are generated during the build process by applying automatic transformations, etc.
I think this previous writeup by Babylon.js team will answer most of your questions:
I would suggest that future documentation refactoring might want to add a “history of babylon packaging” page, as this is probably a common question.
And as noted in earlier comments:
Per @shaderbytes, it’s important not to mix the two strategies when using Babylon.
Per @brianzinn, it possible to import everything from the ES6 packing, make it function very similar to the “legacy” NPM packaging. (docs)
import * as BABYLON from "@babylonjs/core/Legacy/legacy";
While the old UMD style is considered “legacy” and most new projects should be using the @babylonjs(ES6), there are probably still valid reasons to keep the older NPM style available. Notably, using the @babylonjs(ES6) version is still hard (if not impossible) to use directly in browsers without a build/packaging step. If interested in why, checkout some of the new functionality being tested by various JS CDNs. For example:
