Improve frontend loading performance

Dockerfile

@@ -48,6 +48,21 @@ COPY services ./services
 COPY utils ./utils
 COPY scripts ./scripts
 COPY --from=web-build /app/web/out ./web_dist
+RUN python - <<'PY'
+from __future__ import annotations
+
+import gzip
+from pathlib import Path
+
+root = Path("web_dist")
+suffixes = {".css", ".html", ".js", ".json", ".map", ".svg", ".txt", ".xml"}
+for path in root.rglob("*"):
+    if not path.is_file() or path.suffix.lower() not in suffixes or path.stat().st_size < 1024:
+        continue
+    gz_path = path.with_name(f"{path.name}.gz")
+    with path.open("rb") as source, gzip.open(gz_path, "wb", compresslevel=9) as target:
+        target.writelines(source)
+PY
 
 EXPOSE 7860
 

api/app.py

@@ -1,9 +1,11 @@
 from __future__ import annotations
 
 from contextlib import asynccontextmanager
+from mimetypes import guess_type
+from pathlib import Path
 from threading import Event
 
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 
@@ -13,6 +15,45 @@ from api.support import resolve_web_asset, start_limited_account_watcher
 from services.backup_service import backup_service
 from services.config import config
 
+STATIC_CACHE_CONTROL = "public, max-age=31536000, immutable"
+ASSET_CACHE_CONTROL = "public, max-age=86400"
+HTML_CACHE_CONTROL = "no-cache"
+COMPRESSIBLE_SUFFIXES = {".css", ".html", ".js", ".json", ".map", ".svg", ".txt", ".xml"}
+
+
+def _web_cache_headers(full_path: str, asset: Path) -> dict[str, str]:
+    clean_path = full_path.strip("/")
+    suffix = asset.suffix.lower()
+    headers: dict[str, str] = {}
+    if clean_path.startswith("_next/static/"):
+        headers["Cache-Control"] = STATIC_CACHE_CONTROL
+    elif suffix in {".html", ".txt"}:
+        headers["Cache-Control"] = HTML_CACHE_CONTROL
+    else:
+        headers["Cache-Control"] = ASSET_CACHE_CONTROL
+    return headers
+
+
+def _select_web_asset(request: Request, full_path: str, asset: Path) -> tuple[Path, dict[str, str], str | None]:
+    headers = _web_cache_headers(full_path, asset)
+    media_type = guess_type(str(asset))[0]
+    accept_encoding = str(request.headers.get("accept-encoding") or "").lower()
+    gzip_asset = asset.with_name(f"{asset.name}.gz")
+    is_compressible = asset.suffix.lower() in COMPRESSIBLE_SUFFIXES
+    if is_compressible:
+        headers = dict(headers)
+        headers["Vary"] = "Accept-Encoding"
+    if "gzip" in accept_encoding and is_compressible and gzip_asset.is_file():
+        headers = dict(headers)
+        headers["Content-Encoding"] = "gzip"
+        return gzip_asset, headers, media_type
+    return asset, headers, media_type
+
+
+def _is_api_like_path(full_path: str) -> bool:
+    clean_path = full_path.strip("/")
+    return clean_path.startswith(("api/", "auth/", "v1/"))
+
 
 def create_app() -> FastAPI:
     app_version = config.app_version
@@ -47,15 +88,33 @@ def create_app() -> FastAPI:
     app.include_router(system.create_router(app_version))
 
     @app.get("/{full_path:path}", include_in_schema=False)
-    async def serve_web(full_path: str):
+    async def serve_web(full_path: str, request: Request):
+        asset = resolve_web_asset(full_path)
+        if asset is not None:
+            selected_asset, headers, media_type = _select_web_asset(request, full_path, asset)
+            return FileResponse(selected_asset, headers=headers, media_type=media_type)
+        if full_path.strip("/").startswith("_next/"):
+            raise HTTPException(status_code=404, detail="Not Found")
+        fallback = resolve_web_asset("")
+        if fallback is None:
+            raise HTTPException(status_code=404, detail="Not Found")
+        selected_asset, headers, media_type = _select_web_asset(request, "", fallback)
+        return FileResponse(selected_asset, headers=headers, media_type=media_type)
+
+    @app.head("/{full_path:path}", include_in_schema=False)
+    async def serve_web_head(full_path: str, request: Request):
+        if _is_api_like_path(full_path):
+            raise HTTPException(status_code=405, detail="Method Not Allowed")
         asset = resolve_web_asset(full_path)
         if asset is not None:
-            return FileResponse(asset)
+            selected_asset, headers, media_type = _select_web_asset(request, full_path, asset)
+            return FileResponse(selected_asset, headers=headers, media_type=media_type)
         if full_path.strip("/").startswith("_next/"):
             raise HTTPException(status_code=404, detail="Not Found")
         fallback = resolve_web_asset("")
         if fallback is None:
             raise HTTPException(status_code=404, detail="Not Found")
-        return FileResponse(fallback)
+        selected_asset, headers, media_type = _select_web_asset(request, "", fallback)
+        return FileResponse(selected_asset, headers=headers, media_type=media_type)
 
     return app

web/src/components/announcement-markdown.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "@/lib/utils";
+
+export function AnnouncementMarkdown({ content, compact = false }: { content: string; compact?: boolean }) {
+  return (
+    <div
+      className={cn(
+        "space-y-2 text-sm leading-6 text-stone-700",
+        compact && "space-y-1",
+        "[&_input[type=checkbox]]:mr-2 [&_input[type=checkbox]]:align-middle",
+      )}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkBreaks]}
+        skipHtml
+        components={{
+          h1: ({ children }) => <h2 className={cn("font-semibold text-stone-950", compact ? "text-base" : "text-lg")}>{children}</h2>,
+          h2: ({ children }) => <h3 className={cn("font-semibold text-stone-950", compact ? "text-sm" : "text-base")}>{children}</h3>,
+          h3: ({ children }) => <h4 className="text-sm font-semibold text-stone-900">{children}</h4>,
+          h4: ({ children }) => <h5 className="text-sm font-semibold text-stone-900">{children}</h5>,
+          p: ({ children }) => <p>{children}</p>,
+          a: ({ children, href }) => (
+            <a href={href || "#"} target="_blank" rel="noreferrer" className="font-medium text-sky-700 underline underline-offset-2">
+              {children}
+            </a>
+          ),
+          ul: ({ children, className }) => (
+            <ul className={cn("ml-5 space-y-1", className?.includes("contains-task-list") ? "list-none" : "list-disc")}>{children}</ul>
+          ),
+          ol: ({ children }) => <ol className="ml-5 list-decimal space-y-1">{children}</ol>,
+          li: ({ children, className }) => <li className={cn("pl-1", className?.includes("task-list-item") && "-ml-5 list-none pl-0")}>{children}</li>,
+          blockquote: ({ children }) => <blockquote className="border-l-2 border-stone-300 pl-3 text-stone-500">{children}</blockquote>,
+          code: ({ children, className }) => {
+            const isBlock = String(className || "").includes("language-");
+            return isBlock ? (
+              <code className="block overflow-x-auto rounded-xl bg-stone-100 p-3 font-mono text-xs leading-5 text-stone-800">{children}</code>
+            ) : (
+              <code className="rounded bg-stone-100 px-1 py-0.5 font-mono text-xs text-stone-800">{children}</code>
+            );
+          },
+          pre: ({ children }) => <pre className="overflow-x-auto">{children}</pre>,
+          table: ({ children }) => (
+            <div className="overflow-x-auto rounded-xl border border-stone-200">
+              <table className="w-full text-left text-xs">{children}</table>
+            </div>
+          ),
+          th: ({ children }) => <th className="border-b border-stone-200 bg-stone-50 px-3 py-2 font-semibold text-stone-700">{children}</th>,
+          td: ({ children }) => <td className="border-b border-stone-100 px-3 py-2 text-stone-600">{children}</td>,
+          hr: () => <hr className="border-stone-200" />,
+          img: ({ src, alt }) => (
+            <img src={src || ""} alt={alt || ""} className="w-full rounded-xl border border-stone-100 object-cover" loading="lazy" />
+          ),
+        }}
+      >
+        {content || ""}
+      </ReactMarkdown>
+    </div>
+  );
+}

web/src/components/announcements-popover.tsx

@@ -2,9 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { Bell, LoaderCircle, Megaphone } from "lucide-react";
-import ReactMarkdown from "react-markdown";
-import remarkBreaks from "remark-breaks";
-import remarkGfm from "remark-gfm";
+import dynamic from "next/dynamic";
 
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { fetchAnnouncements, type Announcement, type AnnouncementType } from "@/lib/api";
@@ -13,6 +11,13 @@ import { cn } from "@/lib/utils";
 import type { StoredAuthSession } from "@/store/auth";
 
 const READ_STORAGE_PREFIX = "chatgpt2api:announcements:read:";
+const AnnouncementMarkdown = dynamic(
+  () => import("@/components/announcement-markdown").then((module) => module.AnnouncementMarkdown),
+  {
+    ssr: false,
+    loading: () => <div className="h-16 animate-pulse rounded-xl bg-stone-100" />,
+  },
+);
 
 function getAnnouncementStamp(item: Announcement) {
   return `${item.id}:${item.updated_at || item.created_at || ""}`;
@@ -208,7 +213,7 @@ export function AnnouncementsPopover({ session }: { session: StoredAuthSession }
           ) : tab === "notice" ? (
             <div className="space-y-5">
               {visibleItems.map((item) => (
-                <MarkdownBlock key={item.id} content={item.content} />
+                <AnnouncementMarkdown key={item.id} content={item.content} />
               ))}
             </div>
           ) : (
@@ -224,7 +229,7 @@ export function AnnouncementsPopover({ session }: { session: StoredAuthSession }
                       )}
                       aria-hidden="true"
                     />
-                    <MarkdownBlock content={item.content} compact />
+                    <AnnouncementMarkdown content={item.content} compact />
                     <div className="mt-2 text-xs leading-5 text-stone-400">{formatTimelineTime(item.updated_at || item.created_at)}</div>
                   </article>
                 );
@@ -246,59 +251,3 @@ export function AnnouncementsPopover({ session }: { session: StoredAuthSession }
   );
 }
 
-function MarkdownBlock({ content, compact = false }: { content: string; compact?: boolean }) {
-  return (
-    <div
-      className={cn(
-        "space-y-2 text-sm leading-6 text-stone-700",
-        compact && "space-y-1",
-        "[&_input[type=checkbox]]:mr-2 [&_input[type=checkbox]]:align-middle",
-      )}
-    >
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm, remarkBreaks]}
-        skipHtml
-        components={{
-          h1: ({ children }) => <h2 className={cn("font-semibold text-stone-950", compact ? "text-base" : "text-lg")}>{children}</h2>,
-          h2: ({ children }) => <h3 className={cn("font-semibold text-stone-950", compact ? "text-sm" : "text-base")}>{children}</h3>,
-          h3: ({ children }) => <h4 className="text-sm font-semibold text-stone-900">{children}</h4>,
-          h4: ({ children }) => <h5 className="text-sm font-semibold text-stone-900">{children}</h5>,
-          p: ({ children }) => <p>{children}</p>,
-          a: ({ children, href }) => (
-            <a href={href || "#"} target="_blank" rel="noreferrer" className="font-medium text-sky-700 underline underline-offset-2">
-              {children}
-            </a>
-          ),
-          ul: ({ children, className }) => (
-            <ul className={cn("ml-5 space-y-1", className?.includes("contains-task-list") ? "list-none" : "list-disc")}>{children}</ul>
-          ),
-          ol: ({ children }) => <ol className="ml-5 list-decimal space-y-1">{children}</ol>,
-          li: ({ children, className }) => <li className={cn("pl-1", className?.includes("task-list-item") && "-ml-5 list-none pl-0")}>{children}</li>,
-          blockquote: ({ children }) => <blockquote className="border-l-2 border-stone-300 pl-3 text-stone-500">{children}</blockquote>,
-          code: ({ children, className }) => {
-            const isBlock = String(className || "").includes("language-");
-            return isBlock ? (
-              <code className="block overflow-x-auto rounded-xl bg-stone-100 p-3 font-mono text-xs leading-5 text-stone-800">{children}</code>
-            ) : (
-              <code className="rounded bg-stone-100 px-1 py-0.5 font-mono text-xs text-stone-800">{children}</code>
-            );
-          },
-          pre: ({ children }) => <pre className="overflow-x-auto">{children}</pre>,
-          table: ({ children }) => (
-            <div className="overflow-x-auto rounded-xl border border-stone-200">
-              <table className="w-full text-left text-xs">{children}</table>
-            </div>
-          ),
-          th: ({ children }) => <th className="border-b border-stone-200 bg-stone-50 px-3 py-2 font-semibold text-stone-700">{children}</th>,
-          td: ({ children }) => <td className="border-b border-stone-100 px-3 py-2 text-stone-600">{children}</td>,
-          hr: () => <hr className="border-stone-200" />,
-          img: ({ src, alt }) => (
-            <img src={src || ""} alt={alt || ""} className="w-full rounded-xl border border-stone-100 object-cover" loading="lazy" />
-          ),
-        }}
-      >
-        {content || ""}
-      </ReactMarkdown>
-    </div>
-  );
-}

web/src/lib/auth-session.ts

@@ -3,6 +3,12 @@
 import { login } from "@/lib/api";
 import { clearStoredAuthSession, getStoredAuthSession, setStoredAuthSession, type StoredAuthSession } from "@/store/auth";
 
+const VALIDATION_CACHE_MS = 10_000;
+let cachedSession: StoredAuthSession | null = null;
+let cachedAt = 0;
+let validationPromise: Promise<StoredAuthSession | null> | null = null;
+let validationKey = "";
+
 function isUnauthorizedError(error: unknown) {
   if (!error || typeof error !== "object") {
     return false;
@@ -14,9 +20,29 @@ function isUnauthorizedError(error: unknown) {
 export async function getValidatedAuthSession(): Promise<StoredAuthSession | null> {
   const storedSession = await getStoredAuthSession();
   if (!storedSession) {
+    cachedSession = null;
+    cachedAt = 0;
     return null;
   }
 
+  const now = Date.now();
+  if (cachedSession?.key === storedSession.key && now - cachedAt < VALIDATION_CACHE_MS) {
+    return cachedSession;
+  }
+
+  if (validationPromise && validationKey === storedSession.key) {
+    return validationPromise;
+  }
+
+  validationKey = storedSession.key;
+  validationPromise = validateStoredSession(storedSession).finally(() => {
+    validationPromise = null;
+    validationKey = "";
+  });
+  return validationPromise;
+}
+
+async function validateStoredSession(storedSession: StoredAuthSession): Promise<StoredAuthSession | null> {
   try {
     const data = await login(storedSession.key);
     const nextSession: StoredAuthSession = {
@@ -27,12 +53,18 @@ export async function getValidatedAuthSession(): Promise<StoredAuthSession | nul
       wechatOpenid: storedSession.wechatOpenid,
     };
     await setStoredAuthSession(nextSession);
+    cachedSession = nextSession;
+    cachedAt = Date.now();
     return nextSession;
   } catch (error) {
     if (isUnauthorizedError(error)) {
       await clearStoredAuthSession();
+      cachedSession = null;
+      cachedAt = 0;
       return null;
     }
+    cachedSession = storedSession;
+    cachedAt = Date.now();
     return storedSession;
   }
 }