perf(webui): reduce cold-start payload (#5262)

webui/src/tests/vite-config.test.ts

@@ -1,8 +1,64 @@
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { gunzipSync } from "node:zlib";
 import { describe, expect, it } from "vitest";
 
-import { webuiManualChunk } from "../../vite.config";
+import {
+  entryLazyFeatureImports,
+  gzipWebuiAssets,
+  webuiManualChunk,
+  writeCompressedWebuiAssets,
+} from "../../vite.config";
+
+describe("gzipWebuiAssets", () => {
+  it("compresses finalized files after Rollup writes the bundle", () => {
+    const plugin = gzipWebuiAssets();
+    expect(plugin.generateBundle).toBeUndefined();
+    expect(plugin.writeBundle).toBeTypeOf("function");
+
+    const outputDir = mkdtempSync(path.join(tmpdir(), "nanobot-vite-gzip-"));
+    try {
+      const assetPath = path.join(outputDir, "assets", "index-final.js");
+      mkdirSync(path.dirname(assetPath), { recursive: true });
+      const finalized = Buffer.from(
+        "const __vite__mapDeps = ['assets/lazy-feature.js'];\n".repeat(200),
+      );
+      writeFileSync(assetPath, finalized);
+
+      writeCompressedWebuiAssets(outputDir, ["assets/index-final.js"]);
+
+      expect(gunzipSync(readFileSync(`${assetPath}.gz`))).toEqual(finalized);
+    } finally {
+      rmSync(outputDir, { recursive: true, force: true });
+    }
+  });
+});
+
+describe("entryLazyFeatureImports", () => {
+  it("allows the core runtime but rejects heavy lazy feature chunks", () => {
+    expect(entryLazyFeatureImports(["assets/react-vendor-abc.js"])).toEqual([]);
+    expect(entryLazyFeatureImports([
+      "assets/markdown-vendor-abc.js",
+      "assets/syntax-highlight-def.js",
+      "assets/katex-ghi.js",
+    ])).toEqual([
+      "assets/markdown-vendor-abc.js",
+      "assets/syntax-highlight-def.js",
+      "assets/katex-ghi.js",
+    ]);
+  });
+});
 
 describe("webuiManualChunk", () => {
+  it("keeps the React runtime outside lazy feature chunks", () => {
+    expect(webuiManualChunk("/repo/node_modules/react/index.js")).toBe("react-vendor");
+    expect(webuiManualChunk("/repo/node_modules/react-dom/client.js")).toBe("react-vendor");
+    expect(webuiManualChunk("/repo/node_modules/scheduler/index.js")).toBe("react-vendor");
+    expect(webuiManualChunk("/repo/node_modules/clsx/dist/clsx.mjs")).toBe("react-vendor");
+    expect(webuiManualChunk("\0vite/preload-helper.js")).toBe("react-vendor");
+  });
+
   it("keeps Refractor's selector parser in the syntax highlighting chunk", () => {
     expect(
       webuiManualChunk("/repo/node_modules/hast-util-parse-selector/index.js"),

webui/vite.config.ts

@@ -1,8 +1,73 @@
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, type Plugin } from "vite";
 import react from "@vitejs/plugin-react";
+import { readFileSync, writeFileSync } from "node:fs";
 import path from "node:path";
+import { gzipSync } from "node:zlib";
+
+const GZIP_MIN_BYTES = 4 * 1024;
+const GZIP_ASSET_PATTERN = /\.(?:css|html|js|json|mjs|svg)$/i;
+const LAZY_FEATURE_CHUNK_PREFIXES = ["markdown-vendor-", "syntax-highlight-", "katex-"];
+
+export function entryLazyFeatureImports(imports: string[]): string[] {
+  return imports.filter((fileName) =>
+    LAZY_FEATURE_CHUNK_PREFIXES.some((prefix) => path.basename(fileName).startsWith(prefix)),
+  );
+}
+
+function guardWebuiEntryChunk(): Plugin {
+  return {
+    name: "nanobot-guard-webui-entry-chunk",
+    apply: "build",
+    generateBundle(_options, bundle) {
+      for (const output of Object.values(bundle)) {
+        if (output.type !== "chunk" || !output.isEntry) continue;
+        const unexpected = entryLazyFeatureImports(output.imports);
+        if (unexpected.length > 0) {
+          throw new Error(
+            `WebUI entry chunk statically imports lazy features: ${unexpected.join(", ")}`,
+          );
+        }
+      }
+    },
+  };
+}
+
+export function writeCompressedWebuiAssets(outputDir: string, fileNames: string[]): void {
+  for (const fileName of fileNames) {
+    if (!GZIP_ASSET_PATTERN.test(fileName)) continue;
+    const outputPath = path.resolve(outputDir, fileName);
+    const bytes = readFileSync(outputPath);
+    if (bytes.byteLength < GZIP_MIN_BYTES) continue;
+    const compressed = gzipSync(bytes, { level: 9 });
+    if (compressed.byteLength >= bytes.byteLength) continue;
+    writeFileSync(`${outputPath}.gz`, compressed);
+  }
+}
+
+export function gzipWebuiAssets(): Plugin {
+  return {
+    name: "nanobot-gzip-webui-assets",
+    apply: "build",
+    writeBundle(options, bundle) {
+      const outputDir = options.dir ?? (options.file ? path.dirname(options.file) : undefined);
+      if (!outputDir) {
+        throw new Error("WebUI gzip build requires a Rollup output directory");
+      }
+      writeCompressedWebuiAssets(outputDir, Object.keys(bundle));
+    },
+  };
+}
 
 export function webuiManualChunk(id: string): string | undefined {
+  if (
+    id.includes("node_modules/react/")
+    || id.includes("node_modules/react-dom/")
+    || id.includes("node_modules/scheduler/")
+    || id.includes("node_modules/clsx/")
+    || id.includes("vite/preload-helper")
+  ) {
+    return "react-vendor";
+  }
   if (id.includes("node_modules/refractor/lang/")) {
     return;
   }
@@ -47,7 +112,7 @@ export default defineConfig(({ mode }) => {
   const hmrPath = "/__nanobot_vite_hmr";
 
   return {
-    plugins: [react()],
+    plugins: [react(), guardWebuiEntryChunk(), gzipWebuiAssets()],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),