Treeshaking but bundle still over 5MB

Questions
,
1

Hey there,

im trying to treeshake babylonjs but it looks like the bundle is still really big with a size of 5.59 MB. Its a Vue3 + Vite Application and Babylonjs is responsible for 91% (5.13MB) of the bundlesize. Is this normal or is the treeshaking not working for me?

Here is a list of all the babylon imports im doing in my project.

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/index';
import { AssetsManager } from '@babylonjs/core/Misc/assetsManager';
import { Vector3, Color3 } from "@babylonjs/core/Maths/math";
import { Animation } from "@babylonjs/core/Animations/animation";
import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
import { Texture } from "@babylonjs/core/Materials/Textures/texture"
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial'
import { ActionManager } from "@babylonjs/core/Actions/actionManager";
import { ExecuteCodeAction } from '@babylonjs/core/Actions/directActions';
import { CubicEase, EasingFunction } from "@babylonjs/core/Animations/easing";
import { Mesh } from '@babylonjs/core/Meshes/mesh';
import "@babylonjs/loaders/glTF"; 
import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";

A visualisation of the bundle.In the bundle is also Babylonjs Audio or Bones which I never use…

image
image1842×924 167 KB

I am using Vite to build my application. Here are the vite configurations, nothing special I think:

import path from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: "./",
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  server: {
    open: "index.html",
    host: true
  }
})
1 Like
2

cc @RaananW

3

Can you share the project?

4

@RaananW Unfortunately not. Is there any specific information you’re still looking for?

5

just want to see what redundant components are there and where they are referenced

6

I mean - 5 MB sounds like a lot TBH, i assume it is also unminified and not gzipped, right?

7

@RaananW Yes, its 1.06MB gzipped.

I just realized that the plugin I use for the visualization (rollup-plugin-visualizer) doesnt display the real file size. The size of the bundled javascript file is 2.2 MB but the rollup visualizer states 5.59 MB. 2.2 MB is still really big right? What is the size of a basic babylonjs project with treeshaking actually?

Actual file size from vite build log:
image

Roll up Visualizer file size:

image
image1852×929 168 KB

8

This post states that my treeshaking is working correctly and this is the best way to get the smallest bundle size. The bundle size in the post is 1.9MB which is close to my final js file (2.2MB). I guess the rollup visualizer just states wrong file sizes or I just dont understand the visualization :joy:

Im still confused why some packages are in the bundle that are never used like Audio or Bones.

1 Like
9

I have similar size report for my es6 imports:

dist/assets/index-2fe604d2.js 2,275.04 kB │ gzip: 563.23 kB

1 Like
10

If you have suspicious dependencies there, please share a repro and @RaananW might have a look. As we might have one too many import somewhere.

2 Likes