Vite, Rollup, Chuncking

Questions
1

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

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
  • 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:

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

2

Unfortunately I have no experience with vite but How to Vite with Babylon.js (Game Tutorial Series) - Tutorials and tips - Babylon.js (babylonjs.com) might be of your interest? :slight_smile:

3

I figured it out. ViteConfig.js:

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.

4

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

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

1 Like
5

Very valuable info! Thanks for sharing!!!