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

在前端开发领域，尤雨溪作为 Vue 框架的创始人，其推荐的技术和工具往往备受关注。

而 H3 这个轻量级 HTTP 服务器框架，也受到了尤雨溪的力荐，那么 H3 到底有哪些独到之处呢？

什么是 H3？

H3 是一个基于 Web 标准构建的 HTTP 服务器框架，其核心理念是提供简洁的 API 和高度可组合的工具集。

它旨在实现高性能与模块化组合，支持多种 JavaScript 运行时，包括 Deno、Bun、Node.js、Workers 等。

H3 的设计遵循 Web 标准，使得开发者能够利用熟悉的 Web 开发知识快速上手，降低了学习成本。

H3 的核心优势

• 轻量级与高性能：采用 tree - shakable 设计，核心体积小，只打包所需代码，减少体积提升性能。
• 基于 Web 标准：遵循 Web 标准，路由和事件处理基于 fetch 标准，与 Web 技术无缝融合。
• 简洁优雅的 API：提供简洁 API，几行代码即可创建服务器并定义路由，开发直观，减少冗余代码。
• 高度可组合性：支持中间件和插件系统，灵活组合功能，中间件可拦截请求、预处理、记录日志。
• 多运行时支持：兼容多种 JavaScript 运行时环境，如 Deno、Bun、Node.js、Workers 等。

快速上手 H3

安装

npm i h3@beta

创建第一个 H3 应用

引入 H3 和 serve 模块：

import { H3, serve } from "h3"

创建 H3 实例并定义路由：

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

定义 GET 请求路由，访问服务器根路径时返回 "Hello, H3!"。

启动服务器：

serve(app, { port: 3000 })

将应用与服务器绑定，指定监听端口为 3000，在浏览器访问http://localhost:3000查看效果。

H3 的核心特性

生命周期

H3 具有清晰的生命周期，包括传入请求、接受请求、调度请求、响应请求四个阶段。

在每个阶段，开发者都可以通过定义全局钩子来进行相应的处理，如 onRequest、onResponse、onError 等钩子。

路由

H3 的路由系统基于 fetch 标准，提供了简单直观的路由定义方式。

开发者可以通过 app.get、app.post 等方法定义不同 HTTP 方法对应的路由处理函数。

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

同时，H3 的路由支持动态参数

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

通过这种方式可以方便地获取 URL 中的动态参数，实现灵活的路由匹配和处理，满足各种复杂的业务场景需求。

中间件

中间件在 H3 中扮演着重要的角色，它可以在请求处理的过程中进行拦截和干预。

开发者可以定义中间件来实现各种通用的功能，如日志记录、身份验证、请求数据转换等。

app.use(
  "/blog/**",
  (event, next) => {
    console.log("[alert] POST 请求访问 /blog 路径！");
  },
  {
    method: "POST",
    // match: (event) => event.req.method === "POST",
  },
);

事件处理

H3 提供了丰富的事件处理机制，使得开发者可以更加灵活地响应不同的请求事件。

import { H3, defineHandler } from "h3";

const app = new H3();

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

app.get("/", handler);

除了常见的基于 HTTP 方法的路由事件处理外，还可以通过 defineHandler 方法定义通用的事件处理函数，并将其绑定到不同的路由上。

插件

H3 的插件系统极大地扩展了其功能的灵活性和可扩展性。

开发者可以通过插件来添加额外的功能模块，如缓存支持、数据库连接池、模板引擎等。

H3 支持两种插件注册方式:

一种是在创建 H3 实例时通过配置项传入插件，另一种是通过实例的 register 方法动态注册插件。

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 实际应用场景

快速原型开发：

开发原型时，H3 的轻量和快速特性可迅速搭建服务器，实现基本业务逻辑，快速验证想法，加快产品迭代速度，提高开发效率。

边缘计算场景：

边缘计算对性能和资源占用要求高，H3 高性能和轻量级特点适应此场景。可部署在边缘设备上，实现高效数据处理和响应，减少数据传输延迟，提高系统性能，如在物联网应用中部署于边缘网关。

小型 Web 服务：

对于小型 Web 服务，如简单 API 服务、静态文件服务器，H3 提供足够支持且不浪费资源。如小型博客网站可用 H3 搭建后端服务，处理文章发布查询等操作，同时作为静态文件服务器。

结语

尤雨溪力荐的 H3，凭借诸多优势，成为前端开发新星，在多种场景发挥出色作用。

其出现丰富前端技术生态，为开发者提供更多选择，有望推动前端开发技术进步。

• H3 中文文档：h3.zhcndoc
• H3 Github：github/h3

以上关于尤雨溪力荐 H3！性能炸裂！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。