标题中的项目都是使用 Rust 实现的。与其说 Rust 是下一代 Web 开发生态系统，不如说 Rust 正在改写 Web 生态系统。

Web 开发主要涉及创建和维护网站（或应用程序）。它通常分为两个主要部分：

Web技术演进&

是现代 Web 开发架构的名称，由 API 和三个缩写组成。它提倡采用完全解耦和分层的方法来构建 Web 项目：

主要好处是它提供了更高的性能、安全性、更低的扩展成本和更好的开发人员体验。

这并不意味着没有服务器，而是意味着开发人员不需要管理或维护服务器来运行代码。您只需编写代码并将其部署到 AWS 或 AWS 等平台，该平台将负责应用程序的运行、扩展和确保高可用性。

在建筑中，功能是第一公民。这意味着您的应用程序由一个或多个单独的函数组成，每个函数通常执行一项特定的任务。这些功能仅在触发时运行，您只需为它们实际运行的时间付费。

主要优点：

总的来说，专注于前端为开发人员提供了一种简化、高效的方式来构建高性能、安全的Web项目，同时为后端提供了简化的运行环境，使开发人员可以专注于代码而不是服务器或服务器的管理。基础设施。两者的结合可以为开发者提供高效、简化的全栈开发环境。

随着Web生态系统越来越大，暴露出来的问题也越来越多，这就导致了各种轮子的出现。如果非要用两个字来概括的话，我想那就是“更快”。更快地开始，更快地运行，更快地发展，更快地发展……。一切要快的前提是从根源上解决。接下来就进入我们今天的主题吧。因为列出的工具太多，所以更像是一个工具资源列表。可以根据项目的需要进行选择（有时候选择太多也不一定是好事）。

构建工具链

传统的打包工具主要使用JS作为开发语言。由于限制太多，很多有能力的专家开始尝试使用静态类型语言（如Rust、Zig、Go等）来重写工具链生态系统。编写前端工具链的优势主要体现在高性能、内存安全、并发处理和跨平台能力上。

传统工具

[1] 是下一代 ES 模块捆绑器。小块代码可以编译成更大、更复杂的内容，例如库或应用程序。它使用标准化的 ES 模块格式进行代码，而不是以前的 AMD、AMD 等特定解决方案。 ES 模块可让您自由、无缝地组合您最喜欢的库中最有用的单个功能。 ES 模块可以进行优化，以便在现代浏览器中更快地进行本机加载，或者导出为允许当今 ES 模块工作流程的传统模块格式。

[3] 是一个模块打包器。它的主要目的是打包文件以供浏览器使用，但它也能够转换、捆绑或打包几乎任何资源或资产。代码分割允许按需加载应用程序的某些部分。通过“()”，模块可以是 AMD、ES6 模块、CSS、图像、JSON、LESS...以及您的自定义内容。简而言之：

维特

Vite[4]下一代前端工具：

Vite通过其插件API和完整类型支持的API具有高度可扩展性。它主要由两部分组成：

[5] 是一款速度极快的 Web 捆绑器，比传统的 Web 构建工具快 10-100 倍。 Vite 使用预构建的依赖项来加快速度。其主要特点：

基于实现的打包工具包括tsup[8]、esno[9]等。

[10] 是一个用于下一代前端开发的工具链，具有增量打包器和针对 Rust 优化并编写的构建系统。它包含3个主要部分：

凭借增量行为和适应性强的打包策略，它为任何规模的应用程序提供快速灵活的开发体验。

包子

Bun[13]是一个功能齐全的工具，提供与Node.js兼容的运行时、打包器、测试运行器和包管理器，旨在为项目提供高速开发、测试、运行和打包功能。

Node.js 的直接替代品：它原生实现了数百个 Node.js 和 Web API，包括 fs、path 等。

API内置：你需要的API都是内置的，比如启动HTTP服务器、服务器、读写文件、密码哈希、为浏览器打包、编写测试、文件系统路由、读取数据流、生成子进程、以及调用C语言函数等。

包管理器：是兼容npm的包管理器，安装依赖性能领先于npm、pnpm、yarn等。

极快的测试：领先于其他测试框架，如[15]、Jest+SWC、Jest+、Jest+等。

[16]是一个专为Web项目设计的工具链，可以快速格式化和纠正代码。它支持多种主流的Web开发语言，如JSON、JSON和CSS，并且具有合理的默认设置和简单的配置要求。集成多个工具的功能，提供连贯的代码处理、错误显示等体验。其目标是取代 、 、 、 等主流工具。此外，它在IDE支持方面表现良好，具有先进的解析器和错误恢复功能。

罗马

Rome[18]已于2023年9月1日将仓库权限更改为只读。作为罗马的官方分支，它将成为罗马的社区继承者。

SWC

SWC[19] (Web) 是一个用 Rust 编写的超快编译器。它支持在 Rust 和 .它也是下一代开发工具的可扩展平台，被许多流行的工具和公司采用。它可以处理现代功能代码并输出与所有主要浏览器兼容的代码。

Vite（vite---swc[20]）和（swc-[21]）中有插件支持它。它还提供对代码解析、转换和压缩的支持。

SWC VS.

SWC 在单线程上快 20 倍，在四核上快 70 倍。

[22]是一个基于Rust的高性能构建引擎，可与生态系统互操作，可以低成本地被项目集成，并提供更好的构建性能。它借鉴了很多开源项目，比如vite、等等。

CSS

CSS[23] 是一个用 Rust 编写的超快速 CSS 解析器、转换器、打包器和压缩器。其特点包括：

JS运行时

是解释和执行代码的环境。当我们说“运行时”时，我们通常指的是能够执行特定编程语言的代码的执行环境和支持资源。因为，这个环境是代码如何处理的基础。

当您在浏览器中打开网页并运行代码或使用 Node.js 在服务器上运行脚本时，您正在特定的上下文中进行操作。该运行时处理与代码解释、执行、内存管理和 API 访问相关的所有事务。

Node.js

Node.js[28]是一个开源的、跨平台的运行时环境，允许开发人员在服务器端执行代码。它改变了仅在浏览器中运行的理念，为开发者提供了高性能、可扩展的后端开发环境，并通过其丰富的模块生态系统大大加速了开发速度。

德诺

Deno[29] 是下一代运行时。

纳皮-RS

napi-rs[31] 是一个用于在 Rust 中构建预编译 Node.js 插件的框架。该框架利用 Rust 的性能和安全性以及 Node.js 的可扩展性和生态系统，提供了一个强大的工具，允许开发人员构建高效且安全的 Node.js 扩展。

它允许您完全使用 Rust/工具链构建插件，而不涉及 node-gyp[32]。

节点 gyp

node-gyp 是一个跨平台命令行工具，用于为 Node.js 编译本机插件模块。它是 Node.js 生态系统中用于编译扩展并将其链接到本机 C++ 代码的主要工具。这个项目之前被团队使用，并进行了扩展，以支持Node.js原生插件的开发（相信很多编程新手在安装依赖时都遇到过node-gyp的各种错误）。

避免使用 node-gyp 可以简化并加速 Node.js 插件的开发和部署，同时还提供更稳定、更可靠的结果。

构建应用程序

感谢Web生态系统的发展，我们的选择变得越来越多样化。您可以使用 Web 技术构建各种在线网站，借助诸如 之类的框架构建跨平台桌面应用程序，或者编译静态语言以在 Web 浏览器中运行。

[33] 是一个使用 HTML 和 CSS 构建跨平台桌面应用程序的框架。

[35] 使用 Web 前端（HTML、CSS）技术构建更小、更快、更安全的桌面应用程序。由于系统是用来显示界面的，因此封装体积可以极小（一般应用在3M左右）。被认为是 yes 的替代品。 v2.0 支持构建移动应用程序（iOS 和 ）。了解更多。

建议

从我个人的经验来看，API并没有那么丰富。如果你的应用程序对UI显示没有很强的依赖，并且主要用Rust实现功能，那么它适合你。如果你的应用主要侧重于界面UI和交互，由于API较少，难度会更大，而且系统会出现很多兼容性问题（通常很难解决），更建议构建应用。在我看来，有时为了稳定性而牺牲包装量是值得的。

问题并没有消失，只是转移了。当你选择小尺寸的时候，你就不得不忍受API和兼容性不足带来的痛苦。

[36] 是一个专为提高速度而设计的一体化 Web 框架。它专注于服务器端渲染，提供出色的默认性能，并且设计得非常易于使用和扩展。

与其他框架的比较：与为Web应用程序设计的框架不同，例如Next.js。如果您的项目更像是一个应用程序，那么它可能不是最佳选择。

开发人员友好：旨在对所有 Web 开发人员友好，无论他们的技能水平或背景如何。此外，由于它是在服务器上渲染的，因此避免了许多常见的前端开发复杂性。

灵活性和集成：极其灵活，支持从前端框架到 CMS 再到托管平台的 100 多种集成。

（也称为组件群岛）是首创的一种新的Web架构模式。 “孤岛架构”最早由 Etsy 前端架构工程师于 2019 年提出 - [37]，并由作者在 [38] 文章中进行了扩展。

“岛屿”是指静态 HTML 中的交互式 UI 组件。一个页面上可以有多个岛，每个岛都是独立渲染的。您可以将它们视为静态（非交互式）HTML 页面中的动态岛。

在 中，您可以使用任何受支持的 UI 框架（例如 Vue）在浏览器中渲染岛屿。您可以将许多不同的框架混合或缝合到一页中，或者只使用您最喜欢的框架。而这种架构模式依赖于（部分）或（选择性混合）技术。

[39]（缩写为 Wasm）是一种为基于堆栈的虚拟机设计的二进制指令格式。 Wasm 被设计为编程语言（例如：C/C++、Rust 等）的可移植编译目标，使得客户端和服务器应用程序在 Web 上部署成为可能。

红豆杉

Yew[40] 是一个现代 Rust 框架，它使用（Rust 编译为 Wasm）来创建多线程前端 Web 应用程序。

结论

以上就是我眼中的Web生态系统。在新技术的支持下，一定会带来全新的开发体验（对Rust感兴趣的朋友可以看看）。当你把学习一项新技术当成一项任务时，往往是痛苦的。学会用兴趣来驱动学习，感受自己每一天的进步，更容易获得成就感。

[1]

:

[2]

WMR：

[3]

:

[4]

视频：

[5]

:

[6]

：#

[7]

地图：#

[8]

津普：

[9]

埃诺：

[10]

:

[11]

:

[12]

:

[13]

包子：

[14]

:

[15]

:

[16]

:

[17]

锈-：

[18]

罗马：

[19]

SWC：

[20]

vite---swc:

[21]

SWC-：

[22]

:

[23]

CSS：

[24]

:

[25]

V8：

[26]

:

[27]

:

[28]

节点.js：

[29]

德诺：

[30]

:

[31]

纳皮-RS：

[32]

节点 gyp：

[33]

:

[34]

:

[35]

:

[36]

:

[37]

-：

[38]

:

[39]

:

[40]

红豆杉：