Optimizing filesizes (different approaches!)

gems · May 12, 2024, 5:06pm

Hi @RaananW - sorry for the late reply and thanks so much for your response! I can empathise making everything to be ESM-able must’ve been a pretty unenviable task - so happy to report the whole process once I got going was pretty much painless and smooth (hats off!)

In the end I created two files - a lib.preload.js which contains constants and common math classes that are used across GUI, and an lib.babylon.js containing the rest. Folder structure and naming conventions were really clear in the codebase - and I got autocomplete working using SublimeCodeIntel (for some reason LSP wouldn’t do) + adding ./node_modules/@babylonjs/* to jsconfig.json

Process was as you said - remove imports to the custom library bit by bit - and then once final @babylonjs/core import is removed there are a few side effects from missing libs. This was the only difficulty and handled by importing back in Helpers and Extensions!

Total library filesize is now 2.3MB and 400KB when zipped And more savings / lazyloading as the application starts taking shape (ie. splitting up lib.babylon.js into different chunks).

lib.preload.js

/* ====================================== */
/*                                        */
/*         	  BABYLON (PRELOAD)           */
/*                                        */
/* ====================================== */

export { Axis } from '@babylonjs/core/Maths/math.axis.js'
export { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js'
export { Curve3, BezierCurve, Angle, Arc2, Path2, Path3D } from '@babylonjs/core/Maths/math.path.js'
export { 
	Vector2, 
	Vector3, 
	Vector4,
	Quaternion,
	Matrix } from '@babylonjs/core/Maths/math.vector.js'

export * as EngineConstants from '@babylonjs/core/Engines/constants.js'

export const MeshConstants = {
	FRONTSIDE: 0,
	BACKSIDE: 1,
	DOUBLESIDE: 2,
	DEFAULTSIDE: 0,
	NO_CAP: 0,
	CAP_START: 1,
	CAP_END: 2,
	CAP_ALL: 3,
	NO_FLIP: 0,
	FLIP_TILE: 1,
	ROTATE_TILE: 2,
	FLIP_ROW: 3,
	ROTATE_ROW: 4,
	FLIP_N_ROTATE_TILE: 5,
	FLIP_N_ROTATE_ROW: 6,
	CENTER: 0,
	LEFT: 1,
	RIGHT: 2,
	TOP: 3,
	BOTTOM: 4,
	INSTANCEDMESH_SORT_TRANSPARENT: false
}

export const CameraConstants = {
	PERSPECTIVE_CAMERA: 0,
	ORTHOGRAPHIC_CAMERA: 1,
	FOVMODE_VERTICAL_FIXED: 0,
	FOVMODE_HORIZONTAL_FIXED: 1,
	RIG_MODE_NONE: 0,
	RIG_MODE_STEREOSCOPIC_ANAGLYPH: 10,
	RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL: 11,
	RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_CROSSEYED: 12,
	RIG_MODE_STEREOSCOPIC_OVERUNDER: 13,
	RIG_MODE_STEREOSCOPIC_INTERLACED: 14,
	RIG_MODE_VR: 20,
	RIG_MODE_CUSTOM: 22
}

lib.babylon.js

/* ====================================== */
/*                                        */
/*         	 BABYLON (LAZY-LOAD)          */
/*                                        */
/* ====================================== */

export * from './lib.preload.js'

// ------ ENGINE ------

export { Engine } from '@babylonjs/core/Engines/engine.js'
export { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine.js'
// export { ThinEngine } from '@babylonjs/core/Engines/thinEngine.js'
export { NullEngine } from '@babylonjs/core/Engines/nullEngine.js'

/* https://forum.babylonjs.com/t/webgpu-babylonjs-unable-to-compile-effect/27771/3 */
export * as EngineExtensions from '@babylonjs/core/Engines/WebGPU/Extensions' /* DEPENDENCIES */

// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicTexture.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicBuffer.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.uniformBuffer.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.computeShader.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.storageBuffer.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.multiRender.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.readTexture.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTargetCube.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.multiview.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTargetCube.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.externalTexture.js'
// import '@babylonjs/core/Engines/WebGPU/Extensions/engine.videoTexture.js'

// ------ SCENE / RENDERERS ------

export { Scene } from '@babylonjs/core/scene.js'
export { BoundingBoxRenderer } from '@babylonjs/core/Rendering/boundingBoxRenderer.js'
export * as SceneHelpers from '@babylonjs/core/Helpers/sceneHelpers.js' // BUGFIX

// ------ LAYERS ------

export { GlowLayer } from '@babylonjs/core/Layers/glowLayer.js'
export { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer.js'
export { EffectLayer } from '@babylonjs/core/Layers/effectLayer.js'
export { Layer } from '@babylonjs/core/Layers/layer.js'

// ------ LIGHTS ------

export { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js'
export { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js'
export { PointLight } from '@babylonjs/core/Lights/pointLight.js'
export { ShadowLight } from '@babylonjs/core/Lights/shadowLight.js'
export { SpotLight } from '@babylonjs/core/Lights/spotLight.js'

// ------ CAMERAS ------

export { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js'
export { TargetCamera } from '@babylonjs/core/Cameras/targetCamera.js'
export { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js'
export { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera.js'

/* 
	export { TouchCamera } from '@babylonjs/core/Cameras/touchCamera.js'
	export { DeviceOrientationCamera } from '@babylonjs/core/Cameras/deviceOrientationCamera.js'
	export { FlyCamera } from '@babylonjs/core/Cameras/flyCamera.js'
	export { FollowCamera, ArcFollowCamera } from '@babylonjs/core/Cameras/followCamera.js'
	export { GamepadCamera } from '@babylonjs/core/Cameras/gamepadCamera.js'
	export { 
		StereoscopicFreeCamera,
		StereoscopicUniversalCamera,
		StereoscopicGamepadCamera,
		StereoscopicArcRotateCamera,
		StereoscopicScreenUniversalCamera
		} from '@babylonjs/core/Cameras/Stereoscopic/index.js'
	export { VirtualJoysticksCamera } from '@babylonjs/core/Cameras/virtualJoysticksCamera.js'
	export * as RigModes from '@babylonjs/core/Cameras/RigModes/index.js'
	export * as Inputs from '@babylonjs/core/Cameras/Inputs/index.js'
	export { CameraInputsManager } from '@babylonjs/core/Cameras/cameraInputsManager.js'
	export { FreeCameraInputsManager } from '@babylonjs/core/Cameras/freeCameraInputsManager.js'
	export { ArcRotateCameraInputsManager } from '@babylonjs/core/Cameras/arcRotateCameraInputsManager.js'
	export { FlyCameraInputsManager } from '@babylonjs/core/Cameras/flyCameraInputsManager.js'
	export { FollowCameraInputsManager } from '@babylonjs/core/Cameras/followCameraInputsManager.js'
	export * as VR from '@babylonjs/core/Cameras/VR/index.js'
*/

// ------ MATERIALS ------

export { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js'
export { ShaderMaterial } from '@babylonjs/core/Materials/shaderMaterial.js'

export { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js'
export { PBRMetallicRoughnessMaterial } from '@babylonjs/core/Materials/PBR/pbrMetallicRoughnessMaterial.js'

// ------ TEXTURES ------

import '@babylonjs/core/Materials/Textures/Loaders' /* DEPENDENCIES */

export { Texture } from '@babylonjs/core/Materials/Textures/texture.js'
export { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js'
export { ExternalTexture } from '@babylonjs/core/Materials/Textures/externalTexture.js'
export { HDRCubeTexture } from '@babylonjs/core/Materials/Textures/hdrCubeTexture.js'
export { HtmlElementTexture } from '@babylonjs/core/Materials/Textures/htmlElementTexture.js'
export { MirrorTexture } from '@babylonjs/core/Materials/Textures/mirrorTexture.js'
export { VideoTexture } from '@babylonjs/core/Materials/Textures/videoTexture.js'
export { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js'

// ------ ADVANCED MATERIALS ------

export { FurMaterial } from '@babylonjs/materials/fur/index.js'
export { GridMaterial } from '@babylonjs/materials/grid/index.js'

// ------ MESHES / BUILDERS ------

export { TransformNode } from '@babylonjs/core/Meshes/transformNode.js'
// export { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js'  

export { CreateBoxVertexData, CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder.js'
export { CreateCapsuleVertexData, CreateCapsule } from '@babylonjs/core/Meshes/Builders/capsuleBuilder.js'
export { CreateCylinderVertexData, CreateCylinder } from '@babylonjs/core/Meshes/Builders/cylinderBuilder.js'
export { CreateDiscVertexData, CreateDisc } from '@babylonjs/core/Meshes/Builders/discBuilder.js'
export { CreateGoldbergVertexData, CreateGoldberg } from '@babylonjs/core/Meshes/Builders/goldbergBuilder.js'
export { CreateGroundVertexData, CreateGround } from '@babylonjs/core/Meshes/Builders/groundBuilder.js'
export { CreateIcoSphereVertexData, CreateIcoSphere } from '@babylonjs/core/Meshes/Builders/icoSphereBuilder.js'
export { CreatePlaneVertexData, CreatePlane } from '@babylonjs/core/Meshes/Builders/planeBuilder.js'
export { CreatePolygonVertexData, CreatePolygon } from '@babylonjs/core/Meshes/Builders/polygonBuilder.js'
export { CreatePolyhedronVertexData, CreatePolyhedron } from '@babylonjs/core/Meshes/Builders/polyhedronBuilder.js'
export { CreateTiledBoxVertexData, CreateTiledBox } from '@babylonjs/core/Meshes/Builders/tiledBoxBuilder.js'
export { CreateTorusVertexData, CreateTorus } from '@babylonjs/core/Meshes/Builders/torusBuilder.js'
export { CreateTorusKnotVertexData, CreateTorusKnot } from '@babylonjs/core/Meshes/Builders/torusKnotBuilder.js'

export { 
	CreateGreasedLineMaterial, 
	CreateGreasedLine, 
	CompleteGreasedLineWidthTable,
	CompleteGreasedLineColorTable } from '@babylonjs/core/Meshes/Builders/greasedLineBuilder.js' // non-standard (ribbon)
export { CreateLathe } from '@babylonjs/core/Meshes/Builders/latheBuilder.js' // non-standard (ribbon)
export { CreateTube } from '@babylonjs/core/Meshes/Builders/tubeBuilder.js' // non-standard (ribbon)
export { CreateGeodesic } from '@babylonjs/core/Meshes/Builders/geodesicBuilder.js' // non-standard (polyhedron)
export { CreateHemisphere } from '@babylonjs/core/Meshes/Builders/hemisphereBuilder.js' // non-standard (sphere / disc)
export { 
	CreateLineSystemVertexData, 
	CreateDashedLinesVertexData, 
	CreateLineSystem, 
	CreateDashedLines, 
	CreateLines } from '@babylonjs/core/Meshes/Builders/linesBuilder.js' // non-standard 
export { ExtrudeShape, ExtrudeShapeCustom } from '@babylonjs/core/Meshes/Builders/shapeBuilder.js' // non-standard
export { CreateSphereVertexData, CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder.js'
export { 
	CreateTextShapePaths, 
	CreateText } from '@babylonjs/core/Meshes/Builders/textBuilder.js' // non-standard
export { CreateDecal } from '@babylonjs/core/Meshes/Builders/decalBuilder.js' // non-standard

index.js


export * from './lib.preload.js'

export async function LoadBabylon() {
	const timestamp = new Date()
	return new Promise( async (resolve,reject) => {

		if (globalThis.BB) return resolve( globalThis.BB )

		const BB = await import('./lib.babylon.js')
		globalThis.BB = BB

		const elapsed = new Date() - timestamp 
		SAY(`✅ BABYLON LAZYLOAD: ${elapsed}ms`)
		return resolve( globalThis.BB )
	})
}

Topic		Replies	Views
Babylon React Native and Rollup Questions	3	418	June 2, 2021
Minimizing Babylon/core bundle size Questions	10	958	December 18, 2020
Is there way to reduce size of babylon js file? Questions	15	4801	December 13, 2023
Bundle size, ES6 import Questions	4	542	July 3, 2020
Build width rollup bundle size Questions	4	513	April 8, 2022

Optimizing filesizes (different approaches!)

lib.preload.js

lib.babylon.js

index.js

Related topics