前端学不动了：H3——尤雨溪推特转发的轻量HTTP新框架

游戏天地 2025年07月24日 04:39 2 admin

尤雨溪转发了一个推特，是 H3 ( Http 简写)，

尤雨溪转发了一个推特，是 H3 ( Http 简写)，研究了下，还挺有意思。下面我们来看看他的前世今生！

知识点	诞生年份	最新版本	简介
H3	2020	v2 beta	轻量级、快速且可组合的服务器框架。
学习等级	分类	官网
中级	后端	https://h3.dev/guide

起名原因：一场“突发奇想”

2020 年，为支撑 Nuxt 3 与 Nitro 的轻量化需求，H3 应运而生。“H3” 全称 H(TTP)，读音 /eɪtʃθriː/（类似 h-3）。开发者戏称其诞生是“解决 Node.js 和 Web 标准割裂的临时方案”，却意外成长为跨运行时 HTTP 框架标杆。

工具起源：解决三大痛点

兼容性割裂：早年边缘计算（Edge）兴起，Node.js 与 Web API（如 Request/Response）标准不统一
性能瓶颈：传统框架臃肿，适配层拖慢请求处理
开发体验差：中间件逻辑混乱，类型支持薄弱。

原理剖析：三层架构设计

Srvx：抽象 Deno/Bun/Node/Edge 的底层 HTTP 接口，性能达原生 Node 的 96.98%
Rou3：超轻路由匹配（支持 :param、** 通配符），单次请求处理仅 3–7µs
H3 核心：组合式工具库，树摇优化后最小仅 2.1KB（gzip）

版本迭代：从兼容走向颠覆

2020 (v1)：解决 Node 与 Edge 兼容问题，整合 unenv 支持 Node 库
2023 (v1.8)：拥抱 Web Streams，实现 Vercel/AI 流式响应
2024 (v2 beta)：性能暴增 5–156 倍，请求延迟压至 1.2µs（Deno），包体积减少 90%！

快速上手

安装启动

将 h3 作为依赖项进行安装：

npm i h3@beta

创建一个入口文件server.mjs

import { H3, serve } from "h3";const app = new H3().get("/", (event) => "⚡️ Tadaa!");serve(app, { port: 3000 });

然后就可以启动了

node --watch ./server.mjs

现在你可以在浏览器访问 http://localhost:3000

请求生命周期

-> 传入请求:fetch(request)->server.fetch(request)-> 接收请求: new H3Event(request) -> onRequest(event) -> h3.handler(event)-> 调度请求：[match route] -> middlewareA(middlewareB(route.handler(event)))-> 发送响应：Returned Value => Response -> onResponse(response) -> Response

路由处理

// 单路由app.get("/hello", () => "Hello world!");app.on("GET", "/hello", () => "Hello world!");// 多路由app  .get("/hello", () => "GET Hello world!")  .post("/hello", () => "POST Hello world!")  .any("/hello", () => "Any other method!");app.all("/hello", (event) => `This is a ${event.req.method} request!`);// 动态路由// [GET] /hello/Bob => "Hello, Bob!"app.get("/hello/:name", (event) => {  return `Hello, ${event.context.params.name}!`;});app.get("/hello/*", (event) => `Hello!`);// 通配符路由app.get("/hello/**", (event) => `Hello ${event.context.params._}!`);

中间件

// 全局中间件app.use((event) => {  console.log(event);});// 全局通配符中间件app.use(  "/blog/**",  (event, next) => {    console.log("[alert] POST request on /blog paths!");  },  {    method: "POST",    // match: (event) => event.req.method === "POST",  },);// 注册中间件拦截app.use(async (event, next) => {  const rawBody = await next();  // [intercept response]  return rawBody;});// 路由中间件import { basicAuth } from "h3";app.get(  "/secret",  (event) => {    /* ... */  },  {    middleware: [basicAuth({ password: "test" })],  },);// 工厂函数import { onRequest, onResponse, onError } from "h3";app.use(  onRequest((event) => {    console.log(`[${event.req.method}] ${event.url.pathname}`);  }),);app.use(  onResponse((response, event) => {    console.log(`[${event.req.method}] ${event.url.pathname} ~>`, body);  }),);app.use(  onError((error, event) => {    console.log(      `[${event.req.method}] ${event.url.pathname} !! ${error.message}`,    );  }),);

事件处理

// 定义事件import { H3, defineHandler } from "h3";const app = new H3();const handler = defineHandler((event) => "Response");app.get("/", handler);

响应

const handler = (event) =>  new Response(JSON.stringify({ hello: "world" }), {    headers: {      "content-type": "application/json;charset=UTF-8",    },  });