大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 H3

H3（发音为 /etθri/，如 h-3）是一个为高性能和可移植性而构建的最小 h(ttp) 框架。有以下显著特点：

• 便携：在 Serverless、Workers 和 Node.js 中完美运行
• 体积小：体积小支持 tree-shakable
• 现代：原生 Promise 支持
• 可扩展：附带一组可组合实用程序，但可以扩展
• 原生支持 Router：使用 unjs/radix3 进行超快速路由匹配
• 兼容性好：与 node/connect/express 中间件的兼容层

值得一提的是，H3 有一个可组合实用程序的概念，接受 event（来自 eventHandler((event) => {})）作为其第一个参数。 与将其注入 Node.js 框架（例如： Express）中常用的全局中间件中的事件或应用程序实例相比，具有多个性能优势。

可组合实用程序的概念意味着仅执行和打包所需的代码，其余实用程序在不使用时可以进行 Tree-Shaking。

目前 H3 在 Github 上通过 MIT 协议开源，有超过 2.4k 的 star、95.8k 的项目使用量、代码贡献者 60+，是一个值得关注的前端开源项目。

如何使用 H3

下面是使用 H3 的简单 hello world 示例：

import { createServer } from 'node:http';
import { createApp, eventHandler, toNodeListener } from 'h3';

const app = createApp();
app.use(
  '/',
  eventHandler(() => 'Hello world!')
);

createServer(toNodeListener(app)).listen(process.env.PORT || 3000);

也可以使用 listen（优雅的 HTTP 监听器） 作为 H3 优雅监听器的示例：

import { createApp, eventHandler, toNodeListener } from 'h3';
import { listen } from 'listhen';

const app = createApp();
app.use(
  '/',
  eventHandler(() => 'Hello world!')
);

listen(toNodeListener(app));

h3 创建的 app 实例使用中间件堆栈，能够匹配路由前缀并应用匹配的中间件。

如果，要选择使用更高级、更方便的路由系统，可以创建一个路由实例并将其注册到应用程序实例中。

import { createApp, eventHandler, createRouter } from 'h3';

const app = createApp();
const router = createRouter()
  .get(
    '/',
    eventHandler(() => 'Hello World!')
  )
  .get(
    '/hello/:name',
    eventHandler((event) => `Hello ${event.context.params.name}!`)
  );

app.use(router);

H3 可以使用不同的方法多次注册同一条路由，路由内部存储在 Radix Tree 中，并使用 unjs/radix3 进行匹配。

参考资料

https://github.com/unjs/h3

https://github.com/unjs/listhen

https://github.com/expressjs/express

https://dev.to/pankajkumar/how-to-setup-a-simple-http-server-local-web-server-with-nodejs-4fi4