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!
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:
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.
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.
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.
Hi @brianzinn! My apologize on missing your comment.
So far, I have tried to self-contained the 3D graphics as much as possible, and I found that iframe can solve my problem. By communicate with 3D through iframe, my Web application is able to optimize the SEO as much.
This is my result.
However, can be better if we can reducing Babylon.js bundle-size on long road.
Hey there. 
Have you tried using the ES6/Webpack Babylon tree shaking example to produce your tree shook Babylon js bundle? I’ve been working with that lately and so I tried importing the same classes as you and built a 956 KiB Babylon bundle, down from 3+ MB. 
Hi @Blake! Thank you for mentioning.
I already used the tree shaking, and it’s going great. However, on my project probably using more function than that i.e. CSG, so that’s why I separate into graphics app and web app.
Aah, I gotcha, I thought you were stuck at 3+ MB Babylon bundle with those 10 classes, NM then 
Thanks @Blake
