# Vite, Rollup, Chuncking

**URL:** <https://forum.babylonjs.com/t/vite-rollup-chuncking/39106>\
**Category:** Questions\
**Created:** [March 16, 2023, 8:13pm UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106 "2023-03-16T20:13:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![charliesideroad](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@charliesideroad](https://forum.babylonjs.com/u/charliesideroad)\
**Post date:** [March 16, 2023, 8:13pm UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106/1 "2023-03-16T20:13:17Z")

</div>

simple test scene:  
scene,camera,light, plane with jpg image(72kb)

```auto
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Engine } from "@babylonjs/core/Engines/engine";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { Color3 } from "@babylonjs/core/Maths/math.color";

```

npm run dev:

(!) Some chunks are larger than 500 kBs after minification. Consider:

- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: [Configuration Options | Rollup](https://rollupjs.org/configuration-options/#output-manualchunks)
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Vite has a rollup plugin, but I’m finding difficult to apply the rollup plug in vite.config. I’m hoping someone has simple example.  
I got this far:

```auto
import { defineConfig, searchForWorkspaceRoot } from "vite";
const rollup = require('rollup');
import laravel from "laravel-vite-plugin";
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
    server: {
        fs: {
            allow: [searchForWorkspaceRoot(process.cwd())],
        },
    },
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",

                "resources/js/app.js",
                "resources/js/bootstrap.js",
                "resources/js/welcome.js",
            ],
            refresh: true,
        }),
        vitePluginRequire(),
    ],
    build: {
        rollupOptions: {
          output: {
            manualChunks: {
          ?????????????????
            },
          },
        },
      },
    
    
});

```

My current PageSpeed Insite score is 70. I’m hoping chunking or something else may increase it a bit.  
Thanks

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [March 17, 2023, 12:02pm UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106/2 "2023-03-17T12:02:37Z")

</div>

Unfortunately I have no experience with vite but [How to Vite with Babylon.js (Game Tutorial Series) - Tutorials and tips - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/how-to-vite-with-babylon-js-game-tutorial-series/33845) might be of your interest? 🙂

---

<div class="post-metadata">

**Author:** ![charliesideroad](https://avatars.discourse-cdn.com/v4/letter/c/5daacb/32.png) [@charliesideroad](https://forum.babylonjs.com/u/charliesideroad)\
**Post date:** [March 18, 2023, 9:50am UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106/3 "2023-03-18T09:50:34Z")

</div>

I figured it out. ViteConfig.js:

```auto
import { defineConfig, searchForWorkspaceRoot } from "vite";

import laravel from "laravel-vite-plugin";
import vitePluginRequire from "vite-plugin-require";

export default defineConfig({
    server: {
        fs: {
            allow: [searchForWorkspaceRoot(process.cwd())],
        },
    },
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",

                "resources/js/app.js",
                "resources/js/bootstrap.js",
                "resources/js/welcome.js"
            ],
            refresh: true,
        }),
        vitePluginRequire(),
    ],

    build: {
        chunkSizeWarningLimit: 700,
        rollupOptions: {
            output: {
                manualChunks: (id) => {
                    if (
                        id.includes("@babylonjs/core/Engines/engine") ||
                        id.includes("@babylonjs/core/scene")                      
                    ) {
                        return 'BabylonCoreScene/';
                    }
                }
            }
        }
    }
});

```

result is now under 500:  
public/build/assets/welcome-f93ad8cb.js 312.15 kB │ gzip: 90.07 kB  
public/build/assets/BabylonCoreScene/-393a7133.js 417.18 kB │ gzip: 101.41 kB

You can’t add too many Chunks, you’ll get errors. There wasn’t any increase in speed, but it gets rid of the warning.

---

<div class="post-metadata">

**Author:** ![ecartz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecartz/32/42571_2.png) [@ecartz](https://forum.babylonjs.com/u/ecartz)\
**Post date:** [September 24, 2024, 4:05pm UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106/4 "2024-09-24T16:05:23Z")

</div>

This answer did not work for me as is. I wrote up how I extended it on Stack Overflow: [vue.js - Skipping larger chunks while running "Npm run build" - Stack Overflow](https://stackoverflow.com/a/79019461/6660678)

It wasn’t enough for me to split off just Engine and Scene. I needed much more.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 24, 2024, 6:01pm UTC](https://forum.babylonjs.com/t/vite-rollup-chuncking/39106/5 "2024-09-24T18:01:13Z")

</div>

Very valuable info! Thanks for sharing!!!