Production build js is 3.5mb?

Building the Minimal scene produces a 3.5mb js file. I noticed is only 315kb. How can I reduce the size of the prod js file?

Original Post on Discord

by user 300386587278049291

Hi @BMAN , you can enable gzip compression in the build settings to reduce it further, and we’re actively looking into dynamically loading some of the references that aren’t needed always.

Needle Engine is pretty small, that bundle you’re seeing already includes three (for rendering), rapier (for physics), and other dependencies

Things like Rapier should in the future only be loaded when physics are actually needed – I believe Rapier alone is 50% of the current build size :smiling_face_with_tear:

We’re also looking into proper tree shaking depending on usecase – e.g. when you basically have a static bundle that you want to publish we can treeshake out all components you’re not using, but if you’re building a platform, then you want users to be able to upload scenes with components, so they can’t be stripped out (and the latter is what we currently do)

Roger that, very excited for the proper tree shaking :slightly_smiling_face: Is there any method, no matter how hacky, you could recommend to manually trim that js?

by user 300386587278049291

Can you enable gzip for now? That alone should make it quite smaller

The biggest impact would probably be ripping out Rapier entirely, cc @marcel :cactus: for potentially some hints on that, but I can’t recommend that :slightly_smiling_face:

Definitely noted though, bundle size is important to us, we just didn’t get to the above mentioned optimizations / dynamic loading yet

Right now the only super hacky way would be to make a local copy of the package and manually removing the dependency or by modifying the vite build script to skip including rapier (which might cause runtime errors if anything is trying to access physics) or maybe the dependency can be dynamically loaded only on demand.

By enabling gzip you also reduce the size to roughly 1.5mb i think so if you can you should definitely be doing that (it needs to be enabled on your server as well, e.g. via htaccess)

thanks @herbst🌵 and @marcel :cactus: for the super prompt responses. gzip did reduce but would always love to get smaller as I have a couple projects in the pipeline that will need optimized for mobile audience.

by user 300386587278049291

Maybe worth trying is something like this? GitHub - vite-plugin/vite-plugin-dynamic-import: Enhance Vite builtin dynamic import

ok cool will check out! this is all in my efforts to provide a Nuxt project btw…will update that other thread…

by user 300386587278049291

Yes same here - as Felix said we have that on the map but didnt get to it yet

Cool! If you have any insights please feel free to share :slightly_smiling_face:

For later reference i think something that our codegen might need to do is emitting code for lazily importing the types / maybe defer registration until components are used (e.g. only import rapier if any component that uses physics is being used) Dynamic import() | vite-plugin-ssr

Something else we are considering is splitting the engine into more granular modules (e.g. a UI module, a physics module…) That can be installed optionally (instead of being included in the core runtime) and make it a user choice of what features their app actually needs. I think this is something i would prefer at the moment

the latter would be my preference - making it a user choice

by user 300386587278049291

Same here, i think it would be more predictable and less complex than adding a ton of magic to the whole system

agreed, already way too much magic in development these days :rofl:

by user 300386587278049291