WinterJS 1.0 終于發(fā)布了！

WinterJS 是一個(gè)使用 Rust 編寫的、與 WinterCG 兼容的 JavaScript 運(yùn)行時(shí)，使用 SpiderMonkey 引擎執(zhí)行 JavaScript，并使用 Tokio 處理底層的 HTTP 請(qǐng)求和 JS 事件循環(huán)。WinterJS 運(yùn)行時(shí)還可以編譯為 WebAssembly，并且因此是第一個(gè)完全可在 Wasmer Edge 中運(yùn)行的生產(chǎn)級(jí)運(yùn)行時(shí)。

以下是我們?cè)?WinterJS 1.0 中取得的成就，距離我們的首次公告僅過了四個(gè)月：

• 飛快的速度（比 Bun、WorkerD 和 Node 更快?。?/li>
• WinterJS 現(xiàn)在完全兼容* WinterCG 規(guī)范
• Cloudflare API 兼容性
• Web 框架支持：Next.js（支持 React 服務(wù)器組件！）、Hono、Astro、SvelteKit 等

現(xiàn)在，讓我們更詳細(xì)地了解每個(gè)特性！

飛快的速度

WinterJS 1.0 在本地執(zhí)行時(shí)能夠處理 150,000 個(gè)請(qǐng)求/秒（使用 WASIX 編譯為 Wasm 后為 20,000 個(gè)請(qǐng)求/秒）。

截至今日，WinterJS 比 Bun（117,000 請(qǐng)求/秒）、WorkerD（40,000 請(qǐng)求/秒）和 Node（75,000 請(qǐng)求/秒）處理更多的請(qǐng)求/秒（請(qǐng)參見基準(zhǔn)測(cè)試）。

圖片

WinterCG 兼容性

WinterCG 是負(fù)責(zé)定義一組全局類和函數(shù)的機(jī)構(gòu)之一，這些類和函數(shù)需要存在才能在一組基礎(chǔ)架構(gòu)上正確運(yùn)行工作負(fù)載。

自我們首次公告以來，我們已經(jīng)添加了對(duì)完整一套 API 的支持，包括：

• Data fetching:fetch、URL、Request、Response
• Files:Blob、File
• Streams:ReadableStream、WritableStream、TransformStream*
• Text Encoders:TextEncoder、TextEncoderStream、atob、btoa
• Cryptography:crypto*

注意：變換流中的反壓和一些（非常見的）加密算法尚未實(shí)現(xiàn)。

Cloudflare API 兼容性

我們希望確保大多數(shù)前端框架在 WinterJS 中都能無縫運(yùn)行，無需額外處理。因此，我們有兩個(gè)選擇：

• 為每個(gè)前端框架創(chuàng)建全新的集成
• 加入一個(gè)現(xiàn)有的提案

經(jīng)過對(duì) Deno、Cloudflare 和 Fastly 適配器的深入分析，我們意識(shí)到最強(qiáng)大的選擇是 Cloudflare，因?yàn)樗呀?jīng)支持了其他 API 框架的大部分功能，并且可能是最常用的。因此，我們決定采用 Cloudflare API 兼容性。

為了支持 Cloudflare Worker 的工作負(fù)載，我們著手解決了四個(gè)主要方面的問題：

• 通過 import 語(yǔ)法支持 ES 模塊
• 通過 Node.js 兼容性 API 支持
• 通過node:async_hooks 支持 AsyncLocalStorage
• 通過 _routes.json 支持調(diào)用路由
• 支持文件系統(tǒng)結(jié)構(gòu)

_worker.js
index.html
mystaticimage.jpg

• 支持 Cloudflare 的 WinterCG 自定義 fetch API

export default {
 async fetch(request, env, ctx) {
  return new Response('Hello World!');
 },
}

以及 env.ASSETS API，它允許通過 Rust 的超級(jí)優(yōu)化的靜態(tài) Web 服務(wù)器直接提供靜態(tài)資產(chǎn)，因此您可以執(zhí)行：

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname.startsWith('/api/')) {
      // TODO: Add your custom /api/* logic here.
      return new Response('Ok');
    }
    // Otherwise, serve the static assets.
    // Without this, the Worker will error and no assets will be served.
    return env.ASSETS.fetch(request);
  },
}
}

[請(qǐng)?jiān)诖颂幉榭赐暾淖远x Cloudflare fetch API：](https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/)

在獲得所有這些功能之后，我們幾乎可以通過傳遞 --mode=cloudflare 來運(yùn)行任何其他網(wǎng)絡(luò)框架。

winterjs --mode=cloudflare output/static
  # OR (using WASIX)
wasmer run wasmer/winterjs --net --mapdir=output/static:/web -- --mode=cloudflare /web

現(xiàn)有 Web 框架的兼容性

由于與 Cloudflare Workers API 的新兼容性，我們現(xiàn)在完全支持以下框架，不僅可以提供框架生成的靜態(tài)網(wǎng)站，還可以讓這些框架進(jìn)行服務(wù)器端渲染（SSR）：

• Next.js（應(yīng)用模板，演示）
• Next.js React 服務(wù)器組件（應(yīng)用模板，演示）- 注意：服務(wù)器端獲取緩存尚未實(shí)現(xiàn)
• Hono（應(yīng)用模板，演示）
• Astro.build（應(yīng)用模板，演示）
• Remix.run（應(yīng)用模板，演示）
• Svelte（應(yīng)用模板，演示）
• Gatsby（應(yīng)用模板，演示）
• Nuxt（應(yīng)用模板，演示）

支持 React 服務(wù)器組件

我們?nèi)〉玫淖罹咛魬?zhàn)性的成就之一是運(yùn)行具有服務(wù)器組件支持的 Next.js 服務(wù)器，因此渲染可以完全在服務(wù)器端完成。

努力使 React 服務(wù)器組件完全可用有助于我們發(fā)現(xiàn)我們的流實(shí)現(xiàn)與規(guī)范存在一些細(xì)微但重要的差異。我們還意識(shí)到我們的獲取實(shí)現(xiàn)有一些怪癖需要修復(fù)，但最終，在經(jīng)過許多汗水和不眠之夜后，我們完全做到了！??

[您可以查看使用 React 服務(wù)器端組件的 Hacker News 演示：]（https://next-rsc-hn.wasmer.app/）（請(qǐng)注意，在此演示中，我們沒有在服務(wù)器端緩存獲取結(jié)果，因此加載時(shí)間可能不是最快的）。

我們現(xiàn)在只差一小步就可以將我們的 Next.js 前端從 Vercel 遷移到 Wasmer Edge，成本更低，而且完全可以在本地重現(xiàn)。

即刻體驗(yàn) Wasmer Edge！選擇上述任一應(yīng)用程序模板，在 Wasmer Edge 上部署您的第一個(gè) WinterJS 應(yīng)用程序，或按照 JS Worker 快速入門指南操作。

還有一個(gè)小細(xì)節(jié)… 我們正在準(zhǔn)備在 Wasm 空間中完全運(yùn)行 JIT 編譯的 JS 工作負(fù)載……敬請(qǐng)關(guān)注更多更新！

接下來是什么？WinterJS 1.0 只是開始。

在 Wasmer，我們正在開發(fā)一種新的邊緣部署應(yīng)用程序的方式，通過嘗試邊緣技術(shù)，為您的項(xiàng)目開啟令人難以置信的新用例。

作者 | Arshia Ghafoori

翻譯、整理 | 五月君

原文 https://wasmer.io/posts/winterjs-v1