Babylon.js bundle size

Hi guys,

I’m currently working with Babylon.js + React.js. Here is how I imported the core:

I want to ask that is there anyway to minimize the bundle size? The current development size in webpack is 6.3MB just for core and for production is 3.2MB+

Thank you!

1 Like

It looks like tree shaking is not working properly for you could you use a bundle analyser just to be sure ?

Hi @sebavan, sorry for replying late. Here is my bundle analyze.

With tree-shake import:

Production build:

Without tree-shake import:

Production build:

1 Like

hi @hxxngvx - Those are close to what I am getting with a production build on a basic scene (not sure why bundler split @babylonjs/core across multiple chunks here, but I am using next/dynamic instead of next-transpile-modules). I’m just under 3MB without gzip on a very basic playground:

Without tree-shake import it makes sense that everything is brought in. If you are expecting different results than you shared, can you provide a repo and expected results? I’m happy to look. Cheers.

Hi @brianzinn! Since the outcome of tree-shake import is better than the others, I’m okay with it. Is there anything more I can do to decrease the bundle size if my website needs to be SEO-friendly?
Also, I’m using Babylon.js with React.js, and is a private project. If you need further, I will gladly provide it.

@hxxngvx you are showing us stats size which is not relevant for the client, what is important is the parsed sized for parse, compile, jit and so on + gzipped for transport.

The number you see is not what you have on disk. Your chunk is probably about 600k parsed here.

1 Like

I don’t think much more can be done to decrease bundle size - there is probably lower hanging fruit to make your site more SEO friendly. I suspect your assets are larger than this library tree shaken. Getting your first page load with perhaps a screenshot and a loading icon as a fallback can speed up perceived loading and you can load async your babylon scene with separate chunks. Use tools like Google Pagespeed. SSR using something like next/gatsby or other Jamstack may be useful for you as well, but I am not an SEO expert. It’s definitely a worth discussion - there are some libraries out there optimizing scenes for different devices to speed up loading reduce poly count/texture sizes/etc. Probably worthwhile to start a new topic.

2 Likes

Hi @sebavan, @brianzinn!

I’ll be seeking a way to reduce bundle size, therefore I’ll probably start a new discussion about it if necessary.
Thank you for your support!

hi @hxxngvx I think this is a good thread for reducing bundle-size (further). I was just thinking that SEO specific questions may get more traction on their own.