UI optimizations

Overlord-Server/src/server/routes/assets-routes.ts

@@ -7,6 +7,49 @@ type AssetsRouteDeps = {
   mimeType: (path: string) => string;
 };
 
+const COMPRESSIBLE_TYPES = new Set(["text/html", "text/css", "text/javascript", "application/json", "image/svg+xml"]);
+
+function isCompressible(contentType: string): boolean {
+  for (const t of COMPRESSIBLE_TYPES) {
+    if (contentType.startsWith(t)) return true;
+  }
+  return false;
+}
+
+function acceptsGzip(req: Request): boolean {
+  return (req.headers.get("accept-encoding") ?? "").includes("gzip");
+}
+
+const STATIC_ASSET_CACHE = "public, max-age=3600, stale-while-revalidate=86400";
+const MUTABLE_ASSET_CACHE = "public, max-age=60, stale-while-revalidate=300";
+const NO_CACHE = "no-cache";
+
+function assetCacheControl(relativePath: string): string {
+  if (relativePath === "custom.css") return NO_CACHE;
+  if (relativePath === "notification-sw.js") return NO_CACHE;
+  if (relativePath.endsWith(".min.js") || relativePath.endsWith(".min.css")) {
+    return STATIC_ASSET_CACHE;
+  }
+  if (/\.(ico|png|jpg|jpeg|webp|woff2?|ttf|eot|svg)$/.test(relativePath)) {
+    return STATIC_ASSET_CACHE;
+  }
+  return MUTABLE_ASSET_CACHE;
+}
+
+async function compressedResponse(
+  req: Request,
+  body: Uint8Array | ArrayBuffer,
+  headers: Record<string, string>,
+): Promise<Response> {
+  if (!isCompressible(headers["Content-Type"] ?? "") || !acceptsGzip(req) || body.byteLength < 1024) {
+    return new Response(body, { headers });
+  }
+  const compressed = Bun.gzipSync(new Uint8Array(body instanceof ArrayBuffer ? body : body));
+  return new Response(compressed, {
+    headers: { ...headers, "Content-Encoding": "gzip", "Vary": "Accept-Encoding" },
+  });
+}
+
 export async function handleAssetsRoutes(
   req: Request,
   url: URL,
@@ -17,7 +60,7 @@ export async function handleAssetsRoutes(
     return new Response(css, {
       headers: {
         "Content-Type": "text/css; charset=utf-8",
-        "Cache-Control": "no-cache",
+        "Cache-Control": NO_CACHE,
       },
     });
   }
@@ -25,7 +68,8 @@ export async function handleAssetsRoutes(
   if (req.method === "GET" && url.pathname === "/favicon.ico") {
     const file = Bun.file(path.join(deps.PUBLIC_ROOT, "assets", "favicon.ico"));
     if (await file.exists()) {
-      return new Response(file, { headers: deps.secureHeaders("image/x-icon") });
+      const headers = { ...deps.secureHeaders("image/x-icon"), "Cache-Control": STATIC_ASSET_CACHE };
+      return new Response(file, { headers });
     }
     return new Response("Not found", { status: 404 });
   }
@@ -56,10 +100,26 @@ export async function handleAssetsRoutes(
 
   const file = Bun.file(resolvedPath);
   if (await file.exists()) {
-    const headers: Record<string, string> = { ...deps.secureHeaders(deps.mimeType(url.pathname)) };
+    const contentType = deps.mimeType(url.pathname);
+    const headers: Record<string, string> = {
+      ...deps.secureHeaders(contentType),
+      "Cache-Control": assetCacheControl(relativePath),
+    };
     if (relativePath === "notification-sw.js") {
       headers["Service-Worker-Allowed"] = "/";
     }
+
+    const stat = file;
+    const etag = `"${stat.size.toString(36)}-${stat.lastModified.toString(36)}"`;
+    headers["ETag"] = etag;
+    if (req.headers.get("if-none-match") === etag) {
+      return new Response(null, { status: 304, headers });
+    }
+
+    if (isCompressible(contentType) && acceptsGzip(req)) {
+      const bytes = await file.arrayBuffer();
+      return compressedResponse(req, bytes, headers);
+    }
     return new Response(file, { headers });
   }
   return new Response("Not found", { status: 404 });