rust 正在全面入侵前端

用户6901603

发布于 2024-03-11 21:07:42

2970

发布于 2024-03-11 21:07:42

文章被收录于专栏：不知非攻

过年期间我没怎么发文章，但是我也没闲着。在这个空闲时间，把 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 开发等场景一网打尽。