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

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"),