大家好,我是 ConardLi。
今天和大家一起来聊聊最近又一个新发布的 JavaScript
运行时:WinterJS
。
WinterJS
是一款极快的 WinterCG
兼容的 Javascript
运行时,它使用 SpiderMonkey
引擎执行 JavaScript
,并使用 Tokio
处理底层的 HTTP
请求和 JS
事件循环。WinterJS
运行时还可以被编译为 WebAssembly
,因此它也是第一个可以完全在 Wasmer Edge
上运行的生产级别的运行时。
名词有点多,可能有些大家还不清楚,我补充解释下:
WinterCG
:这是一个专注于协作和提高 JavaScript
运行时环境的 API
兼容性的社区。特别是在非浏览器的运行环境中,它们致力于提高各大 Web
平台 API
的兼容性。他们通过在运行环境之间进行讨论,向规范制定团体(如 WHATWG、W3C
)提出新的 Web API
或对当前 Web API
的修改提议,以及对现有运行环境行为的文档化,来完成这些工作。
自首次发布以来,WinterCG
就对以下常见 API 进行了兼容:
fetch, URL, Request,Response
Blob,File
ReadableStream, WritableStream, TransformStream
TextEncoder, TextEncoderStream, atob,btoa
crypto
SpiderMonkey
:Mozilla
(火狐)的 JavaScript
引擎,也是首个 JavaScript
引擎,由 Brendan Eich
发起开发。能够解析和执行 JavaScript
代码,在 Web
浏览器或其他项目中运行。
Tokio
:是 Rust
社区广泛使用的异步运行时,对于基于 Rust
的异步 I/O
或基于网络的应用开发尤为实用。它提供了一套用于开发高效,可扩展和可靠的应用程序的工具。
下面是个最简单的示例,首先我们创建一个 serviceworker.js
文件:
addEventListener('fetch', (req) => {
req.respondWith(new Response('hello code秘密花园!'));
});
下面这行简单的命令就可以直接运行 WinterJS
:
$ wasmer run wasmer/winterjs --net --mapdir /app:. /app/serviceworker.js
WinterJS
也可以使用Rust
(cargo install --git https://github.com/wasmerio/winterjs && winterjs serviceworker.js
) 本地运行。
距离 WinterJS
首次发布已经过去四个月时间了,如今 WinterJS 1.0
正式发布了,又带来了如下惊喜:
Bun、WorkerD
和 Node.js
更快)WinterJS
现在完全与 WinterCG
规范兼容Cloudflare API
Web
框架:Next.js
(支持 React
服务器组件!)、Hono、Astro
、SvelteKit
等。WinterJS 1.0
在本机执行时能够每秒处理 150k
请求(使用 WASIX
编译为 Wasm
时每秒能够处理 20k
请求)。
截至目前,WinterJS
每秒可以处理的请求数比 Bun:117k reqs/s
、WorkerD:40k reqs/s
和 Node 75k reqs/s
都要更多。
如果希望确保大多数的前端框架能在 WinterJS
中无缝运行,有以下两个选择:
通过深度分析 Deno、Cloudflare
和 Fastly
的适配器,我们发现最强大的选项是 Cloudflare
,因为它已经支持了其他 API
框架的大多数,而且它可能是最常在实际生产中使用的。因此,WinterJS
选择了 Cloudflare API
的兼容性。
为了支持 Cloudflare Worker
,WinterJS
做了以下四个主要方面的开发(:
import
语法支持 ES
模块Node.js
兼容性 API
node:async_hooks
支持 AsyncLocalStorage
_routes.json
支持调用路由_worker.js
index.html
mystaticimage.jpg
支持 Cloudflare
的 WinterCG
自定义获取 API
。
export default {
async fetch(request, env, ctx) {
return new Response('Hello World!');
},
}
此外,env.ASSETS API
允许直接通过 Rust
的静态 Web 服务器(static-web-server
)提供静态资源:
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);
},
}
由于与 Cloudflare Workers API
的新兼容性,WinterJS
现在完全支持以下框架,不仅为框架生成的静态网站提供服务,还允许这些框架进行服务器端渲染 (SSR):
可以到这里查看以上框架的 Demo
:https://wasmer.io/templates/nextjs-starter
另外,WinterJS
目前还完美支持 React
最新的 Server Components
,这个是很多 JavaScript 运行时还无法做到的事。
可以到这里查看
React Server Components
的 Demo:https://next-rsc-hn.wasmer.app/
想了解更多内容大家可以到以下两个地方: