大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端‬进阶

前言

Rust 由前 Mozilla 开发人员 Graydon Hoare 于 2006 年创建，作为 C 语言的替代品。 可用于创建网络软件、嵌入式计算机和分布式服务、命令行工具等等。

在 Stack overflow 2020 的调查中，Rust 被选为最受欢迎的编程语言第一名，这是因为 86% 的开发人员表示会继续在开发项目中使用它。 其实，自 2016 年以来，Rust 一直在调查中获胜。在 Tiobe 指数上，Rust 的受欢迎程度也在逐步上升。

根据2023年的最新数据，Rust在所有语言的排名中处于第20位，小于 Go（11）< PHP（10）< JavaScript（7）< Java（4）< C （3） < C（2）< Python（1）。但是从整体数据来看，Rust的使用量已经在逐步增加( 0.16)，而PHP（-0.49）、Go（-0.12）都处于下降阶段。

同时从下图就能看出，2012年到2023年的 tiobe 指数表明，Rust几乎处于明显的上升趋势，而且非常亮眼。从Rust的企业覆盖来说已经算是火的不能再火了。比如：微软打算将部分基建从C 过渡到Rust，谷歌宣布支持使用 Rust 开发 Chromium，Dropbox、Sentry、Amazon 和 Mozilla等也在积极布局Rust，甚至Linux内核都已经支持Rust开发等。

既然 Rust 如此受欢迎，今天就带着大家一起看看 Rust 如何火到了前端圈，介绍几个基于Rust 开发的优秀前端项目。当然，针对每一个项目都不会过多的展开，如果比较感兴趣可以继续在我的主页阅读。话不多说，直接开始！

SWC

SWC（Speedy Web Compiler） 是一个可扩展的基于 Rust 的平台，用于下一代快速开发工具。 Next.js、Parcel 和 Deno 等工具以及 Vercel、字节、腾讯等诸多互联网公司都在使用 SWC。

在 Github 上，SWC 已经有超过 26.3k 的 star 和 1k 的 fork，每周的平均下载量达到了 1983k。目前有超过 6.2k 的项目使用 SWC、项目贡献人数也达到了 200 ，增长势头非常迅猛。可通过如下命令一键安装、试用：

npm i -D @swc/cli @swc/core

SWC 可用于编译和打包工作，是一个超快速的 JavaScript 编译器。 对于编译，SWC 读取 JavaScript / TypeScript 文件，并输出所有主流浏览器都支持的代码。在性能上，SWC 比其他打包方案具有明显的优势。数据表明，使用 SWC 替换 Babel ，打包速度提升20x~60x!

Turbo

Turbo的logo

Turbo 是用 Rust 编写的用于前端开发的下一代工具链。 它由3个主要部分组成：

• Turbopack：增量打包器（Webpack 的后继者
• Turborepo：增量构建系统
• Turbo 引擎：低级增量计算和记忆引擎

Turbopack 建立在 Turbo 的增量架构之上，Turbo 可以缓存程序中任何函数的执行结果。 当程序再次运行时，函数不会重新运行而是直接从缓存读取，除非函数的输入内容发生变化。 这种细粒度的架构调整使得程序能够在函数级别跳过重复大量工作，最终给打包性能带来明显的提升。可以通过如下命令一键创建Turbopack项目：

npx create-next-app --example with-turbopack

数据表明：在大型应用程序上，Turbopack更新速度比 Webpack 快 700 倍。与Vite相比，在具有 5,000 个模块的应用程序上，Turbopack 需要 4 秒才能启动，而 Vite（带有 SWC）需要 16.6 秒。

Tauri

Tauri是一个为所有桌面平台构建小巧、快速的二进制文件的框架。 开发人员可以集成任何编译为 HTML、JS 和 CSS 的前端框架来构建用户界面。Tauri 是目前最流行的 Electron 替代方案，通过使用 Rust 和 Webview2 成功解决了 Electron 的包体积大、内存占用高的诸多问题。

Tauri在设计上保证安全性、高性能、以及与所有前端框架的兼容，允许为所有桌面平台（包括 macOS、Windows 和 Linux 操作系统）创建可执行应用程序。

图1：什么是Tauri？

目前，Tauri 在Github上拥有 59.7K 星和 1.5K GitHub 分支。所以，目前使用Electron方案的桌面程序如果成本不大，可以考虑下使用Tauri。可通过下面命令一键创建Tauri项目：

npm create tauri-app

Deno

Deno（/diːnoʊ/，发音为 dee-no）是一个安全的 JavaScript、TypeScript 和 WebAssembly 运行时，为开发人员提供出色的研发体验。 其建立在 V8、Rust 和 Tokio 之上，由以下几个核心部分组成：

• Rust（Deno 的核心是用 Rust 编写的，Node 的核心是用 C 编写的）
• Tokio（用 Rust 编写的事件循环）
• TypeScript（Deno 开箱即用地支持 JavaScript 和 TypeScript）
• V8（Google 的 JavaScript 运行时用于 Chrome 和 Node 等）

Deno 具有沙盒功能，更加安全，支持开箱即用的 TypeScript 和可靠的标准包集合。 尽管如此，Deno 尚未被视为真正的 node.js 竞争者。 最大的劣势是缺失了目前 Node.js 生态多达 150 万的通用 npm 包。 相比之下，目前只有大约 5000 个 Deno 模块可用。

当然，随着Deno V1.31的发布，其和Node.js已经越来越近了。

注意：从性能上说，在HTTP 吞吐量、请求延迟等方面Node.js和Deno也是各有所长

Rome

Rome 是 Babel 、Yarn团队作者做的基于 Nodejs 的前端基建全家桶，包含但不限于： Babel、 ESLint、webpack,、Prettier、Jest等等，目前已经成功迁移到Rust。

Rome 是个全家桶 API，所以开发者只需要 yarn add rome 就完成了所有环境准备工作。

• rome bundle ：打包项目。
• rome compile ：编译单个文件。
• rome develop ：调试项目。
• rome parse ：解析文件抽象语法树。
• rome analyzeDependencies： 分析依赖。

Rome 还将文件格式化与 Lint 合并为了 rome check 命令，并提供了友好 UI 终端提示。以下是 Rome 的核心特点：

• 快速：用 Rust 和受 rust-analyzer 启发的创新架构构建，能够更快地完成更多工作。
• 简单：零配置，但支持选项扩展
• 可扩展：旨在处理任何规模的代码库，专注于产品而不是工具。
• 高优化：通过紧密的内部集成，能够重用以前的工作，并且对一个工具的任何改进都会改进它们。
• 可操作且信息丰富：避免模糊的错误消息，当告诉开发者问题时，会准确告诉开发者问题出在哪里以及如何解决
• 开箱即用：使用的所有语言功能都开箱支持，比如 TypeScript 和 JSX 的支持

lightningcss

用 Rust 编写的极其快速的 CSS 解析器、转换器和代码压缩器。将它与 Parcel 一起使用，作为独立的库或 CLI，或通过插件与任何其他工具一起使用。

• 速度极快：解析和缩小大文件在几毫秒内完成，通常输出比其他工具小得多。
• 类型化的属性值：许多其他 CSS 解析器将属性值视为一系列未类型化的标记。 这意味着每个想要对这些值执行某些操作的转换器都必须重复解析，从而导致重复工作和不一致。 Lightning CSS 使用 CSS 规范中的语法解析所有值，并为每个属性公开特定的值类型。
• 浏览器级解析器：Lightning CSS 建立在由 Mozilla 创建并由 Firefox 和 Servo 使用的 cssparser 和选择器 crates 的基础上。
• 代码压缩：lightning CSS 的主要目的之一是缩小 CSS 以使其更小。
• 支持供应商前缀：Lightning CSS 接受浏览器目标列表，并自动添加供应商前缀。
• 浏览器列表配置：Lightning CSS 支持选择加入浏览器列表配置
• 语法检测：Lightning CSS 解析现代 CSS 语法，并根据浏览器目标在需要时生成更兼容的输出。

Yew

Yew 是一个现代 Rust 框架，用于使用 WebAssembly 创建多线程前端 Web 应用程序。Yew具有一个宏，用于使用 Rust 表达式声明交互式 HTML。 在 React 中使用过 JSX 的开发人员在使用 Yew 时应该会很轻松。

Yew通过最小化每个页面呈现的 DOM API 调用并轻松将复杂处理交给后台Web Worker来实现高性能。同时，Yew支持与JavaScript 的互操作性，允许开发人员利用 NPM 包并与现有的 JavaScript 应用程序集成。

注意：Yew 还未达到稳定的1.0版本，后续版本改动可能会带来破坏性改动。

WRY

WRY是Rust 中的跨平台 WebView 渲染库，支持所有主要桌面平台，如 Windows、macOS 和 Linux等等。

WRY 连接各个平台的 Web 引擎，并提供易于使用和统一的接口来渲染 WebView。它还将 TAO 重新导出为事件循环和窗口创建的模块。创建窗口和浏览网站的最小示例代码如下：

fn main() -> wry::Result<()> { use wry::{ application::{ event::{Event, StartCause, WindowEvent}, event_loop::{ControlFlow, EventLoop}, window::WindowBuilder, }, webview::WebViewBuilder, }; let event_loop = EventLoop::new(); let window = WindowBuilder::new() .with_title("Hello World") .build(&event_loop)?; let _webview = WebViewBuilder::new(window)? .with_url("https://tauri.studio")? .build()?; event_loop.run(move |event, _, control_flow| { *control_flow = ControlFlow::Wait; match event { Event::NewEvents(StartCause::Init) => println!("Wry has started!"), Event::WindowEvent { event: WindowEvent::CloseRequested, .. } => *control_flow = ControlFlow::Exit, _ => (), } });}

WGPU

WebGPU 是由 W3C 发布的规范，目标是让网页代码能安全可靠地访问 GPU 功能。其实现方式借鉴了 Vulkan API，会翻译到宿主硬件所用的各式 API（如 DirectX、Metal、Vulkan 等）上执行。

WGPU是基于WebGPU API的Rust的安全且便携式图形库。 它适用于通用图形，并在GPU上计算。使用WGPU的应用也可以在Vulkan，Metal，DirectX 11/12和OpenGL ES上本地运行，以及WebGPU和WebGL2上的WebAssembly浏览器上运行。

Napi-rs

NAPI-RS 是一个框架，用于在 Rust 中构建预编译的 Node.js 插件（Addons）。

NAPI-RS具有以下特点：

• 带来node.js的本地性能
• ‍♂️内存安全，由Rust编译器保证
• ⚡️在Node.js和Rust之间通过Buffer 和 TypedArray实现零复制数据
• ⚙️几行代码快速实现并行操作

use napi_derive::napi;#[napi]fn fibonacci(n: u32) -> u32 { match n { 1 | 2 => 1, _ => fibonacci(n - 1) fibonacci(n - 2), }}

兼容 CommonJS 和 esm，同时自动生成 .d.ts 文件。

本文总结

本文主要和大家介绍让 Rust 火遍前端圈的 几个明星项目，包括：SWC、Turbopack 、Deno 、Tauri、Rome、lightningcss 、Yew、WRY、WGPU、NAPI-RS等等。因为篇幅有限，文章并没有过多展开，针对其中的任何一个项目我都有单独出文章进行详细介绍，大家可以从我的主页查看、阅读。如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://swc.rs/

https://wgpu.rs/

https://github.com/swc-project/swc

https://tauri.app/

https://rome.tools/

https://juejin.cn/post/7033196853218770980

https://dev.to/hackmamba/exploring-yew-the-rust-based-frontend-framework-as-a-vue-developer-3915

https://github.com/parcel-bundler/lightningcss