尤雨溪力薦 H3！性能炸裂！

作者：小4子 2025-06-18 10:02:06

開發(fā) 前端

尤雨溪力薦的 H3，憑借諸多優(yōu)勢，成為前端開發(fā)新星，在多種場景發(fā)揮出色作用。

在前端開發(fā)領(lǐng)域，尤雨溪作為 Vue 框架的創(chuàng)始人，其推薦的技術(shù)和工具往往備受關(guān)注。

而 H3 這個輕量級 HTTP 服務(wù)器框架，也受到了尤雨溪的力薦，那么 H3 到底有哪些獨(dú)到之處呢？

什么是 H3？

H3 是一個基于 Web 標(biāo)準(zhǔn)構(gòu)建的 HTTP 服務(wù)器框架，其核心理念是提供簡潔的 API 和高度可組合的工具集。

它旨在實(shí)現(xiàn)高性能與模塊化組合，支持多種 JavaScript 運(yùn)行時，包括 Deno、Bun、Node.js、Workers 等。

H3 的設(shè)計遵循 Web 標(biāo)準(zhǔn)，使得開發(fā)者能夠利用熟悉的 Web 開發(fā)知識快速上手，降低了學(xué)習(xí)成本。

H3 的核心優(yōu)勢

輕量級與高性能：采用 tree - shakable 設(shè)計，核心體積小，只打包所需代碼，減少體積提升性能。
基于 Web 標(biāo)準(zhǔn)：遵循 Web 標(biāo)準(zhǔn)，路由和事件處理基于 fetch 標(biāo)準(zhǔn)，與 Web 技術(shù)無縫融合。
簡潔優(yōu)雅的 API：提供簡潔 API，幾行代碼即可創(chuàng)建服務(wù)器并定義路由，開發(fā)直觀，減少冗余代碼。
高度可組合性：支持中間件和插件系統(tǒng)，靈活組合功能，中間件可攔截請求、預(yù)處理、記錄日志。
多運(yùn)行時支持：兼容多種 JavaScript 運(yùn)行時環(huán)境，如 Deno、Bun、Node.js、Workers 等。

快速上手 H3

(1) 安裝

npm i h3@beta

(2) 創(chuàng)建第一個 H3 應(yīng)用

引入 H3 和 serve 模塊：

import { H3, serve } from "h3"

創(chuàng)建 H3 實(shí)例并定義路由：

const app = new H3().get("/", (event) => "Hello, H3!")

定義 GET 請求路由，訪問服務(wù)器根路徑時返回 "Hello, H3!"。

啟動服務(wù)器：

serve(app, { port: 3000 })

將應(yīng)用與服務(wù)器綁定，指定監(jiān)聽端口為 3000，在瀏覽器訪問http://localhost:3000查看效果。

H3 的核心特性

(1) 生命周期

H3 具有清晰的生命周期，包括傳入請求、接受請求、調(diào)度請求、響應(yīng)請求四個階段。

在每個階段，開發(fā)者都可以通過定義全局鉤子來進(jìn)行相應(yīng)的處理，如 onRequest、onResponse、onError 等鉤子。

(2) 路由

H3 的路由系統(tǒng)基于 fetch 標(biāo)準(zhǔn)，提供了簡單直觀的路由定義方式。

開發(fā)者可以通過 app.get、app.post 等方法定義不同 HTTP 方法對應(yīng)的路由處理函數(shù)。

app
  .get("/hello", () => "GET Hello world!")
  .post("/hello", () => "POST Hello world!")
  .any("/hello", () => "Any other method!");

同時，H3 的路由支持動態(tài)參數(shù)

// [GET] /hello/Bob => "Hello, Bob!"
app.get("/hello/:name", (event) => {
  return `Hello, ${event.context.params.name}!`;
});

通過這種方式可以方便地獲取 URL 中的動態(tài)參數(shù)，實(shí)現(xiàn)靈活的路由匹配和處理，滿足各種復(fù)雜的業(yè)務(wù)場景需求。

(3) 中間件

中間件在 H3 中扮演著重要的角色，它可以在請求處理的過程中進(jìn)行攔截和干預(yù)。

開發(fā)者可以定義中間件來實(shí)現(xiàn)各種通用的功能，如日志記錄、身份驗(yàn)證、請求數(shù)據(jù)轉(zhuǎn)換等。

app.use(
  "/blog/**",
  (event, next) => {
    console.log("[alert] POST 請求訪問 /blog 路徑！");
  },
  {
    method: "POST",
    // match: (event) => event.req.method === "POST",
  },
);

(4) 事件處理

H3 提供了豐富的事件處理機(jī)制，使得開發(fā)者可以更加靈活地響應(yīng)不同的請求事件。

import { H3, defineHandler } from "h3";

const app = new H3();

const handler = defineHandler((event) => "Response");

app.get("/", handler);

除了常見的基于 HTTP 方法的路由事件處理外，還可以通過 defineHandler 方法定義通用的事件處理函數(shù)，并將其綁定到不同的路由上。

(5) 插件

H3 的插件系統(tǒng)極大地擴(kuò)展了其功能的靈活性和可擴(kuò)展性。

開發(fā)者可以通過插件來添加額外的功能模塊，如緩存支持、數(shù)據(jù)庫連接池、模板引擎等。

H3 支持兩種插件注冊方式：

一種是在創(chuàng)建 H3 實(shí)例時通過配置項(xiàng)傳入插件，另一種是通過實(shí)例的 register 方法動態(tài)注冊插件。

import { H3 } from"h3";
import { logger } from"./logger.mjs";

// Using instance config
const app = new H3({
plugins: [logger()],
});

// Or register later
app.register(logger());

// ... rest of the code..
app.get("/**", () => "Hello, World!");

同時，H3 還提供了 definePlugin 方法來方便地定義自定義插件。

import { definePlugin } from "h3";

const logger = definePlugin((h3, _options) => {
  if (h3.config.debug) {
    h3.use((req) => {
      console.log(`[${req.method}] ${req.url}`);
    });
  }
});

H3 實(shí)際應(yīng)用場景

(1) 快速原型開發(fā)：

開發(fā)原型時，H3 的輕量和快速特性可迅速搭建服務(wù)器，實(shí)現(xiàn)基本業(yè)務(wù)邏輯，快速驗(yàn)證想法，加快產(chǎn)品迭代速度，提高開發(fā)效率。

(2) 邊緣計算場景：

邊緣計算對性能和資源占用要求高，H3 高性能和輕量級特點(diǎn)適應(yīng)此場景。可部署在邊緣設(shè)備上，實(shí)現(xiàn)高效數(shù)據(jù)處理和響應(yīng)，減少數(shù)據(jù)傳輸延遲，提高系統(tǒng)性能，如在物聯(lián)網(wǎng)應(yīng)用中部署于邊緣網(wǎng)關(guān)。

(3) 小型 Web 服務(wù)：

對于小型 Web 服務(wù)，如簡單 API 服務(wù)、靜態(tài)文件服務(wù)器，H3 提供足夠支持且不浪費(fèi)資源。如小型博客網(wǎng)站可用 H3 搭建后端服務(wù)，處理文章發(fā)布查詢等操作，同時作為靜態(tài)文件服務(wù)器。