Speed up cold boot: build-time gzip_static, HF Hub CDN asset routing, and parallel prefetch

Dockerfile

@@ -8,8 +8,15 @@ WORKDIR /build
 COPY app/package.json app/package-lock.json ./
 RUN npm ci
 COPY app/ ./
-RUN npm run build
+RUN npm run build && \
+    find /build/dist -type f \( \
+      -name '*.wasm' -o -name '*.js' -o -name '*.css' -o \
+      -name '*.json' -o -name '*.xml' -o -name '*.glb' -o \
+      -name '*.stl' -o -name '*.onnx' -o -name '*.svg' \
+    \) -exec gzip -9 -k {} + && \
+    printf 'gzip_static on;\ngzip on;\ngzip_vary on;\ngzip_proxied any;\ngzip_types application/wasm application/javascript text/css application/json application/xml text/xml model/gltf-binary model/stl application/octet-stream image/svg+xml;\n' > /build/gzip.conf
 
 FROM nginxinc/nginx-unprivileged:alpine
 COPY --from=build /build/dist /usr/share/nginx/html
+COPY --from=build /build/gzip.conf /etc/nginx/conf.d/gzip.conf
 EXPOSE 8080

app/src/game/duck.js

@@ -29,25 +29,37 @@ import { signed } from "./signed.js";
 // `?all=1` for debugging.
 const HIDDEN_MESHES = new Set([]);
 
+const kinematicsPromises = new Map();
+
 export async function loadKinematics(url) {
-  // Same cache-buster as the GLB: force-cache would otherwise keep
-  // serving a stale kinematics.json after the mesh list changes.
-  const r = await fetch(signed(`${url}?v=${MESH_VERSION}`), { cache: "force-cache" });
-  if (!r.ok) throw new Error(`kinematics fetch ${r.status}`);
-  const k = await r.json();
-  // The exported mesh_dir is root-absolute ("/robot/mjlab/meshes"), which
-  // breaks when the app is served under a prefix (/play/). Rebase it like
-  // every other asset URL (MODEL_DIR is "./robot/mjlab").
-  if (typeof k.mesh_dir === "string" && k.mesh_dir.startsWith("/")) {
-    k.mesh_dir = `.${k.mesh_dir}`;
-  }
-  // Full-resolution meshes by default (the reduction will be redone
-  // interactively in Blender later). `?lite=1` opts into a decimated
-  // meshes-lite/ sibling if present.
-  if (new URLSearchParams(location.search).get("lite") === "1") {
-    k.mesh_dir = k.mesh_dir.replace(/\/meshes$/, "/meshes-lite");
+  const lite = new URLSearchParams(location.search).get("lite") === "1";
+  const key = `${url}|${lite ? "1" : "0"}`;
+  if (!kinematicsPromises.has(key)) {
+    kinematicsPromises.set(
+      key,
+      (async () => {
+        // Same cache-buster as the GLB: force-cache would otherwise keep
+        // serving a stale kinematics.json after the mesh list changes.
+        const r = await fetch(signed(`${url}?v=${MESH_VERSION}`), { cache: "force-cache" });
+        if (!r.ok) throw new Error(`kinematics fetch ${r.status}`);
+        const k = await r.json();
+        // The exported mesh_dir is root-absolute ("/robot/mjlab/meshes"), which
+        // breaks when the app is served under a prefix (/play/). Rebase it like
+        // every other asset URL (MODEL_DIR is "./robot/mjlab").
+        if (typeof k.mesh_dir === "string" && k.mesh_dir.startsWith("/")) {
+          k.mesh_dir = `.${k.mesh_dir}`;
+        }
+        // Full-resolution meshes by default (the reduction will be redone
+        // interactively in Blender later). `?lite=1` opts into a decimated
+        // meshes-lite/ sibling if present.
+        if (lite) {
+          k.mesh_dir = k.mesh_dir.replace(/\/meshes$/, "/meshes-lite");
+        }
+        return k;
+      })(),
+    );
   }
-  return k;
+  return kinematicsPromises.get(key);
 }
 
 // One GLB, named meshes matching kinematics geom.mesh (e.g. "left_shell.stl").

app/src/game/game.js

@@ -144,6 +144,30 @@ async function boot({ scene, camera, renderer }) {
     );
   };
 
+  // ── Prefetch static assets in parallel with WASM runtime chunks ─────
+  // Kick off GLB + ONNX policy downloads immediately so they overlap with
+  // the @mujoco/mujoco + onnxruntime-web chunk and WASM downloads instead
+  // of waiting in a serial waterfall behind MjVFS setup. Attach no-op
+  // catch handlers so a early network error only surfaces when awaited at
+  // its traced BIOS step.
+  const glbPrefetch = loadGlbGeometries();
+  glbPrefetch.catch(() => {});
+  const fetchPolicyBytes = (url) =>
+    fetch(signed(url)).then((r) => {
+      if (!r.ok) throw new Error(`policy fetch ${r.status}: ${url}`);
+      return r.arrayBuffer();
+    });
+  const policyPrefetch = {
+    walk: fetchPolicyBytes(POLICIES.walk),
+    sitstand: fetchPolicyBytes(POLICIES.sitstand),
+    roll: fetchPolicyBytes(POLICIES.roll),
+    kickL: fetchPolicyBytes(POLICIES.kickL),
+    kickR: fetchPolicyBytes(POLICIES.kickR),
+    groundpick: fetchPolicyBytes(POLICIES.groundpick),
+    stand: fetchPolicyBytes(POLICIES.stand),
+  };
+  for (const p of Object.values(policyPrefetch)) p.catch(() => {});
+
   // ── Runtimes (vendored, lazy chunks) ─────────────────────────────────
   const [{ default: loadMujocoFactory }, ort] = await traced(
     "RUNTIME MODULES",
@@ -329,22 +353,24 @@ async function boot({ scene, camera, renderer }) {
   const donePolicies = bootLine("LOADING POLICIES");
   const sessionOpts = { executionProviders: ["wasm"] };
   let policiesLoaded = 0;
-  const bootPolicy = (url) =>
-    ort.InferenceSession.create(signed(url), sessionOpts).then((s) => {
-      donePolicies.progress(`${++policiesLoaded}/7`);
-      return s;
-    });
+  const bootPolicy = (bufPromise) =>
+    bufPromise
+      .then((buf) => ort.InferenceSession.create(new Uint8Array(buf), sessionOpts))
+      .then((s) => {
+        donePolicies.progress(`${++policiesLoaded}/7`);
+        return s;
+      });
   try {
     [sessions.walk, sessions.sitstand, sessions.roll, sessions.kickL, sessions.kickR,
      sessions.groundpick, sessions.stand] =
       await Promise.all([
-        bootPolicy(POLICIES.walk),
-        bootPolicy(POLICIES.sitstand),
-        bootPolicy(POLICIES.roll),
-        bootPolicy(POLICIES.kickL),
-        bootPolicy(POLICIES.kickR),
-        bootPolicy(POLICIES.groundpick),
-        bootPolicy(POLICIES.stand),
+        bootPolicy(policyPrefetch.walk),
+        bootPolicy(policyPrefetch.sitstand),
+        bootPolicy(policyPrefetch.roll),
+        bootPolicy(policyPrefetch.kickL),
+        bootPolicy(policyPrefetch.kickR),
+        bootPolicy(policyPrefetch.groundpick),
+        bootPolicy(policyPrefetch.stand),
       ]);
   } catch (err) {
     donePolicies("FAILED");