# Large bundle size **URL:** \ **Category:** Questions\ **Created:** [June 8, 2022, 12:38am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145 "2022-06-08T00:38:57Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 8, 2022, 12:38am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/1 "2022-06-08T00:38:57Z")
I’m getting insanely large bundle sizes, like over 20MB dev, and 10MB prod. The project uses es6 modules, so tree shaking should eliminate unused code, but there’s over 8MB of orphan modules. TBH, even without them we’re looking at over 1.5MB, but at this point I’m willing to live with that. I based my setup off `https://github.com/RaananW/babylonjs-webpack-es6`, which produces 647KB bundles… What did I mess up? ```auto > webpack --config webpack.prod.js asset all.js 9.68 MiB [emitted] [minimized] [big] (name: main) 1 related asset asset index.html 147 bytes [compared for emit] orphan modules 8.01 MiB [orphan] 1058 modules runtime modules 1.17 KiB 6 modules cacheable modules 20.7 MiB modules by path ./node_modules/@babylonjs/core/ 10.1 MiB 305 modules ``` package.json ```auto "dependencies": { "@babylonjs/core": "^5.9.0", "@babylonjs/gui": "^5.9.0", "@babylonjs/inspector": "^5.9.0", "earcut": "^2.2.3" } ``` tsconfig.json ```auto "target": "es2016", "module": "es6", "moduleResolution": "node", "skipLibCheck": true ``` webpack.common.js ```auto const path = require("path"); const fs = require("fs"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const appDirectory = fs.realpathSync(process.cwd()); module.exports = { entry: path.resolve(appDirectory, "src/index.ts"), //path to the main .ts file output: { filename: "all.js", //name for the javascript file that is created/compiled in memory path: path.resolve(__dirname, 'dist'), clean: true }, resolve: { extensions: [".tsx", ".ts", ".js"], }, module: { rules: [ { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/, }, { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.(png|jpg|jpeg|gif)/, use: ["image-loader"] } ], }, plugins: [ new HtmlWebpackPlugin({template: 'www/index.html'}) ] }; ``` webpack.prod.js ```auto const { merge } = require('webpack-merge'); const common = require('./webpack.common.js') module.exports = merge(common, { mode: 'production' }); ``` ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [June 8, 2022, 12:42am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/2 "2022-06-08T00:42:08Z")
cc @RaananW ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [June 8, 2022, 12:49am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/3 "2022-06-08T00:49:44Z")
That is probably the inspector! though I can’t really tell without seeing your actual code. Would you be able to share your project? ---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 8, 2022, 8:38pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/4 "2022-06-08T20:38:08Z")
Dropping the inspector brought the bundle size down to 4.39 MiB. I made a bare-bones copy of the project, and posted it at [GitHub - alekop/projx-copy](https://github.com/alekop/projx-copy). ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 8, 2022, 8:40pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/5 "2022-06-08T20:40:31Z")
Our current package is built with side effects so importing from /core : `import { Engine, Scene } from "@babylonjs/core"` will result in importing the entire package. You should split your import at the module level to ensure to benefit from tree shaking. > **[Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking)** > > Learn about tree shaking and package management in Babylon.js. @RaananW is actively working on finding an awesome alternative. ---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 8, 2022, 9:28pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/6 "2022-06-08T21:28:31Z")
I replaced all things like `import { Mesh } from "@babylonjs/core"` with more specific ones, like `import { Mesh } from "@babylonjs/core/Meshes/mesh"`… Now the bundle size went up to 56 MiB! LOL And there are tons warnings like: `ModuleConcatenation bailout: Cannot concat with ./node_modules/@babylonjs/gui-editor/node_modules/@babylonjs/core/Maths/math.frustum.js: Module ./node_modules/@babylonjs/gui-editor/node_modules/@babylonjs/core/index.js is referenced from these modules with unsupported syntax: ./node_modules/@babylonjs/gui-editor/dist/babylon.guiEditor.max.js (referenced with cjs require)` I just don’t understand what’s different about my setup vs RaananW’s. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 8, 2022, 9:49pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/7 "2022-06-08T21:49:29Z")
@RaananW should be able to have a quick look tomorrow ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [June 9, 2022, 4:34am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/8 "2022-06-09T04:34:21Z")
This is due to a mismatch in versions between the installed @babylonjs/core and some other package. probably the inspector, unless you are using the gui-editor package directly. can you make sure all versions of the dependencies match? i.e. run `npm update`, after makig sure the version in package.json matches. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [June 9, 2022, 4:34am UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/9 "2022-06-09T04:34:35Z")
---
**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\ **Post date:** [June 9, 2022, 4:39pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/10 "2022-06-09T16:39:49Z")
Here’s a fork of your repo with bundle size 466 KB. Importing each class from its path brought it down to 1.5 MB, enabling the minimizer brought it down the rest of the way. 🙂 > **[GitHub - BlakeOne/projx-copy](https://github.com/BlakeOne/projx-copy)** > > Contribute to BlakeOne/projx-copy development by creating an account on GitHub. ---
**Author:** ![alekop](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alekop/32/4380_2.png) [@alekop](https://forum.babylonjs.com/u/alekop)\ **Post date:** [June 10, 2022, 5:26pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/11 "2022-06-10T17:26:54Z")
After replacing all imports, the bundle size has dropped to about 4.5MB for dev, and 1.3 MB for prod. Not great, but a major improvement. But importing the inspector brings it back to 57 MB, even though the babylon.inspector.bundle.max.js is 5.1 MB. FWIW, the inspector is import conditionally - I’m not sure if that makes a difference. ```auto if (_DEBUG) { require("@babylonjs/inspector") } ``` ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [June 10, 2022, 5:31pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/12 "2022-06-10T17:31:17Z")
you can async-import it to separate it from the main bundle. That owuld be my recommendation in that case. The inspector is thought to be a debugging tool, so we didn’t make package size a priority. Of course, it shouldn’t increase so much, and we will work in the future on improving this. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [June 10, 2022, 5:31pm UTC](https://forum.babylonjs.com/t/large-bundle-size/31145/13 "2022-06-10T17:31:20Z")