rust 正在全面入侵前端-轻识

过年期间我没怎么发文章，但是我也没闲着。在这个空闲时间，把 rust 基础以及个别生态技术方案扎扎实实的，系统的学习了一下。学习他的初衷是因为 rust 可以支持鸿蒙应用的原生级别的开发，为进阶资深级别的鸿蒙开发者做技术储备。

可这不学不知道，一学吓一跳。这才发现 rust 生态，正在以一种锐不可当的气势，全方位、无死角的入侵前端开发的方方面面。最关键的是，由于有后发优势，这些技术方案往往都比已有的前端方案更加先进、更加科学、性能更高...

0

Farm

Farm 是一个使用 rust 编写的极速构建引擎。在它的宣传文档中，认为自己比 Webpack 快 10 倍以上，比 vite 快 5 倍。很显然，这是一款想要精准狙击 vite 的前端项目构建工具。

由于 vite 对于项目内的模块采取的是请求时编译的策略，并且对源码不 bundle，因此，根据字节架构团队内部的经验，当项目规模巨大的时候，vite 的首次页面加载时间可能长达数十秒「页面首次加载时，加载了大量的模块」，刷新时极其卡顿，并且由于巨大的请求量可能导致浏览器崩溃，影响开发体验。

而且 vite 在开发环境使用 esbuild 进行预编译，在生成环境使用 bundler rollup，处理方式不一样，偶尔可能会出现开发环境与线上行为不一致的情况，一旦出现不一致，则意味着巨大的排查成本。

针对 vite 的痛点，Farm 使用 rust 重新实现了对 css/ts/js/sass 的编译能力，能实现毫秒级启动项目，对于大部分情况，能讲 hmr 时间控制在 10ms 以内。

1

Turbopack

相比于 Farm，Turbopack 则显得更加和值得信赖，并且由于 next.js 的加持，它也得到了更多的关注。

Turbopack 同样是一款基于 rust 构建的前端项目构建工具。Turbopack 建立在新的增量架构上，在打包时只关注开发所需的最小资源，因此不管是启动速度还是 hmr 速度，都有远超 vite 的性能。

在具有 3000 个模块的应用上，Turbopack 只需要 1.8s，而 Vite 需要 11.4s。

Turbopack 是由 Vercel 团队提供的，专注于提高 Next.js 速度的打包工具。并且未来的目标是取代 webpack，成为新一代的前端打包工具。因此 Next.js 的成熟与大热，也会带动 Turbopack 成为更值得信赖的打包工具。

2

Rspack

Rspack 是一款由字节团队提供的项目打包工具。和 Turbopack 一样，它也充分发挥了 Rust 语言的性能优势，在打包速度上都有显著的提升。

但是与 Turbopack 不同的是，Rspack 选择了优先对 webpack 生态兼容的路线。一方面，这些兼容可能会带来一定的性能开销，但是在实际的业务落地中，这写性能开销是可以接受的。另外一方面，这些兼容也使得 Rspack 可以更好的与上层框架和生态进行集成，能够实现业务的渐进式迁移。

目前 Rspack 的开发团队也在积极的招聘，很显然，他们对于未来的发展有非常明确的规划。

3

Vite 正在用 rust 重构

Vite 作为新一代高性能打包工具，刚出场时确实惊艳了众人。但是架不住各种疯狂的卷王使用 rust 弯道超车啊。Vite 反而成为了背景板，被按在地上疯狂摩擦。因此为了能够不在性能上被压制太多，Vite 团队正在基于 rust 研发各种替代方案以解决 Vite 目前的痛点。

Rolldown

Vite 团队正在研发 Rolldown 并且已经开源，它是使用 rust 开发的 Rollup 的替代品。它的重点将放在本地级别的性能上，同时保持与 Rollup 的兼容性。最终目标是能悄悄在 Vite 中切换到 Rolldown，并且 Vite 的使用者产生最小的影响。

不过目前来看，Vite 要实现 rust 重构这个目标压力很大。因此 Vite 团队规划了四个阶段来推动这个事情

1、替换 esbuild
2、替换 Rollup
3、使用 rust 实现常用需求的内置转化，如编译 ts、JSX 等
4、使用 rust 完全重构 Vite

4

Leptos

Leptos 是一款基于 rust 的类 React/Solid 框架。也是基于 signal 实现的细粒度级别的响应式更新。

基础语法如下：

#[component]
fn App() -> impl IntoView {
  let (count, set_count) = create_signal(0);

  view! {
    <button 
      on:click=move |_| set_count.update(|n| *n += 1)
    >
      "click me"
    </button>

    <p>
      <strong>"Reactive"</strong>
      {count}
    </p>
  }
}

在语法层面与 Solid 非常相似。不过在语法细节设计上，比 Solid 设计得更加的合理。在语义上有更符合直觉的思考。这也就意味着，Leptos 基于 rust 的编译做得更好。

#[component]
fn ProgressBar(
  #[prop(default = 100)]
  max: u16,
  #[prop(into)]
  progress: Signal<i32>
) -> impl IntoView {
  view! {
    <progress max=max value=progress />
  }
}

尽管 Leptos 设计得比较先进，性能也非常强悍，但由于是基于 rust 编写，上手成本非常高，因此在推广上可能会遇到大量的困境。不过这依然挡不住许多程序员对他的热情。

我也是非常喜欢 Leptos 的开发者之一，并且把它作为熟悉 rust 语法学习的主要项目之一，因为这是我们前端更熟悉的领域，因此前端开发通过它掌握 rust 能达到事半功倍的效果。

当然，该工具还有很多潜力我还没彻底挖掘到，比如官方文档里宣称自己是 full Stack 的框架，但是由于我还没有消化完，所以暂时需要进一步学习才能了解。

5

dioxus

dioxus 是一个野心更大的跨平台客户端开发框架，与此同时，它又能做到全栈开发。它在实现原理与语法设计上与 Leptos 有一定的相似之处，但是在 UI 语法的表现上又完全不同

一个简单的例子可以看出来

fn app() -> Element {
  let mut count = use_signal(|| 0);

  rsx! {
    h1 { "High-Five counter: {count}" }
    button { onclick: move |_| count += 1, "Up high!" }
    button { onclick: move |_| count -= 1, "Down low!" }
  }
}

从这个语法设计就可看出，它志在一统江湖。试图将 web 开发，移动端 App 开发，桌面端 App 开发等场景一网打尽。

简单实用下来的感受就是，该框架有过渡模仿 React 的嫌疑，以致于熟悉 React 的我学习它比 Leptos 更加的得心应手。

6

Tauri

Tauri 是一款 Electron 的替代方案。

Electron 主要有两个痛点，一是包体积太大，二是内存消耗严重。因此它的替代方案层出不穷。与前面介绍的几款 rust 框架不同，Tauri 的发展已经趋于成熟，并且已经在许多商用项目中得以应用。

最最最重要的是，我已经开始让我的学生学习它，并作为一个核心项目亮点作为自己的竞争力来应对越来越卷的面试场景。并且取得的效果还不错。从最近这半年的面试的结果来看，许多国内的公司已经开始重视 Tauri 带来的利好。

由于 rust 放弃了体积巨大的 Chromiun 和 nodejs，同样的项目，打包体积可以从 electron 的 60M减少到 4M，内存消耗也能从 500M 减少到 150M 左右。

7

Servo

这是一款基于 rust 开发，并且志在取代 chrome 的浏览器项目。该项目是早期 Mozilla 开发的实验性项目，由于资金有限，中间搁置了很长一段时间，现在眼看着 rust 大火又准备加足马力开始搞，并且近期版本迭代非常快，此时的 Servo 已经由 Linux 基金会接管。

Servo 试图创造一个大规模并行计算的页面渲染模式，来加速渲染、布局、HTML 解析、图像解码等，在 Arm 架构上的测试显示，Servo 的性能显著优于 Chromium。

然后我就去下载这个浏览器来玩了一下，结果发现这玩意儿还是一个简陋版本。基本的 UI 功能还没有做出来。并且许多页面的布局还存在乱序的问题。

只能说暂时值得关注，有很大的发展潜力。用的话，可能还早。

8

Deno

Deno 是一款基于 rust 构建的 JavaScript 运行时。和 node.js 一样出自于同一个大佬之手。Deno 的最新版本也是基于 rust 开发。

对我个人而言，Deno 最大的魅力在于直接原生支持 TypeScript，并且支持了 JSX/TSX。所以我非常看好 Deno 的后续发展，它正在越来越好，虽然现在生态还不足以于 node 抗衡。

9

总结

很明显可以看出，rust 正在入侵前端的方方面面，在有的方面虽不够成熟但已表现出潜力，在某些方面却已经确定了明确的优势。

我认为前端开发再也不能忽视 rust 的存在了。由于同时具备超高的性能于安全性，rust 在各个领域「操作系统层面、AI、游戏开发、服务端、跨端方案、高性能 web 应用...」都已经被高度认可，社区活跃度非常高，生态发展非常迅猛。

因此在去年年底到现在，我一直在投入 rust 的学习中，整体感受下来就是，从一个前端开发的角度切入去学习 rust，上手难度还是比较低的，大概花一天时间就能学完所有基础语法，但是需要我们对内存有非常准确的理解，如果你对内存一头雾水，可能 rust 会很难学习。

然后我们需要花更多的时间去学习 rust 的开发思维与生态，对于前端开发来说，Leptos 是一个不错的学习练手项目。