Hi guys, I’m currently working with Babylon.js + React.js. Here is how I imported the core: [image] 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: [image] Production build: [image] Without tree-shake import: [image] Production build: [image]

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: [image] W…

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 glad…

@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…

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. [image] …

Hey there. :slightly_smiling_face: 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. :+1: [Babylon …

Babylon.js bundle size

Questions

hxxngvx September 10, 2021, 2:02am 3

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

With tree-shake import:

Production build:

Without tree-shake import:

Production build:

Very large app.js file size due to inclusion of Inspector & Guieditor in production code

Topic		Replies	Views
Babylon bundle size Questions	13	1225	December 30, 2024
Babylon.js bundle size for reasonably minimal project? Questions	12	2319	November 18, 2022
Tree Shaking ES6 Questions	5	704	October 24, 2022
ES6 modules and tree shaking - bundle size Questions	26	1744	August 6, 2021
ES6 Tree Shaking build large bundle size Questions documentation	4	1109	May 25, 2021

Babylon.js bundle size

Related topics