feat: 迁移前端构建从 Bun fullstack 到 Vite

前端性能问题根因在于 Bun bundler 无法有效 code split、CSS tree-shake 和产出优化的前端资源。经多轮 Bun 原生优化尝试均无明显效果后，决定将前端构建迁回 Vite。主要变更： - 前端构建：从 Bun HTML import bundling 切换为 Vite build （Rolldown code splitting、vendor chunk、CSS 优化） - 开发模式：从 Bun fullstack 单进程 HMR 切换为 Vite dev server + Bun API server 双进程（:5173 + :3000） - 生产构建：三步流水线（Vite build → code generation → Bun compile），通过 `import with { type: "file" }` 嵌入前端资源 - 静态资源服务：从 Bun HTML import manifest 切换为自定义 serveStaticAsset 函数，支持 SPA fallback 和正确的 Cache-Control - Server 接口：BootstrapOptions 和 StartServerOptions 增加 staticAssets? 可选参数 - 文档更新：DEVELOPMENT.md 和 README.md 反映新的开发模式，主 specs 同步 delta 变更新增能力： - static-asset-embedding: 构建时资源扫描与 code generation、运行时静态资源服务 - vite-frontend-bundling: Vite 构建配置、code splitting 策略、 CSS 处理
2026-05-15 11:26:46 +08:00
parent 28e46b8431
commit d6a77b2c6e
18 changed files with 735 additions and 152 deletions
--- a/tests/server/static.test.ts
+++ b/tests/server/static.test.ts
@@ -0,0 +1,127 @@
+import { describe, expect, test } from "bun:test";
+
+import {
+  contentTypeFor,
+  hasFileExtension,
+  htmlResponse,
+  serveStaticAsset,
+  type StaticAssets,
+} from "../../src/server/static";
+
+function createTestAssets(): StaticAssets {
+  return {
+    files: {
+      "/assets/index-a1b2c3.css": new Blob([".app{}"], { type: "text/css" }),
+      "/assets/index-a1b2c3.js": new Blob(["console.log(1)"], { type: "text/javascript" }),
+      "/assets/vendor-react-x9y8z7.js": new Blob(["react"], { type: "text/javascript" }),
+      "/favicon.svg": new Blob(["<svg/>"], { type: "image/svg+xml" }),
+    },
+    indexHtml: new Blob(["<!doctype html><html></html>"], { type: "text/html" }),
+  };
+}
+
+describe("contentTypeFor", () => {
+  test("JavaScript 文件", () => {
+    expect(contentTypeFor("/assets/index-a1b2c3.js")).toBe("text/javascript; charset=utf-8");
+  });
+
+  test("mjs 文件", () => {
+    expect(contentTypeFor("/assets/chunk.mjs")).toBe("text/javascript; charset=utf-8");
+  });
+
+  test("CSS 文件", () => {
+    expect(contentTypeFor("/assets/style.css")).toBe("text/css; charset=utf-8");
+  });
+
+  test("SVG 文件", () => {
+    expect(contentTypeFor("/icon.svg")).toBe("image/svg+xml");
+  });
+
+  test("未知扩展名返回 octet-stream", () => {
+    expect(contentTypeFor("/file.xyz")).toBe("application/octet-stream");
+  });
+
+  test("无扩展名返回 octet-stream", () => {
+    expect(contentTypeFor("/noext")).toBe("application/octet-stream");
+  });
+});
+
+describe("hasFileExtension", () => {
+  test("有扩展名", () => {
+    expect(hasFileExtension("/assets/index.js")).toBe(true);
+    expect(hasFileExtension("/favicon.svg")).toBe(true);
+  });
+
+  test("无扩展名", () => {
+    expect(hasFileExtension("/dashboard")).toBe(false);
+    expect(hasFileExtension("/")).toBe(false);
+    expect(hasFileExtension("/api/targets")).toBe(false);
+  });
+});
+
+describe("htmlResponse", () => {
+  test("返回 HTML 响应带正确 headers", async () => {
+    const blob = new Blob(["<html></html>"]);
+    const response = htmlResponse(blob);
+
+    expect(response.headers.get("Content-Type")).toBe("text/html; charset=utf-8");
+    expect(response.headers.get("Cache-Control")).toBe("no-cache");
+    expect(await response.text()).toBe("<html></html>");
+  });
+});
+
+describe("serveStaticAsset", () => {
+  test("根路径返回 indexHtml", async () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/", assets);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Type")).toBe("text/html; charset=utf-8");
+    expect(response.headers.get("Cache-Control")).toBe("no-cache");
+    expect(await response.text()).toBe("<!doctype html><html></html>");
+  });
+
+  test("已知资源返回对应文件和 immutable 缓存", async () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/assets/index-a1b2c3.js", assets);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Type")).toBe("text/javascript; charset=utf-8");
+    expect(response.headers.get("Cache-Control")).toBe("public, max-age=31536000, immutable");
+    expect(await response.text()).toBe("console.log(1)");
+  });
+
+  test("未知带扩展名路径返回 404", () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/assets/missing.js", assets);
+
+    expect(response.status).toBe(404);
+  });
+
+  test("SPA fallback — 无扩展名路径返回 indexHtml", async () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/dashboard", assets);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Type")).toBe("text/html; charset=utf-8");
+    expect(response.headers.get("Cache-Control")).toBe("no-cache");
+    expect(await response.text()).toBe("<!doctype html><html></html>");
+  });
+
+  test("SVG 资源返回正确 Content-Type", () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/favicon.svg", assets);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Type")).toBe("image/svg+xml");
+    expect(response.headers.get("Cache-Control")).toBe("public, max-age=31536000, immutable");
+  });
+
+  test("CSS 资源返回正确 Content-Type", () => {
+    const assets = createTestAssets();
+    const response = serveStaticAsset("/assets/index-a1b2c3.css", assets);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("Content-Type")).toBe("text/css; charset=utf-8");
+  });
+});