過年期間我沒怎么發(fā)文章，但是我也沒閑著。在這個空閑時間，把 rust 基礎以及個別生態(tài)技術方案扎扎實實的，系統(tǒng)的學習了一下。學習他的初衷是因為 rust 可以支持鴻蒙應用的原生級別的開發(fā)，為進階資深級別的鴻蒙開發(fā)者做技術儲備。

可這不學不知道，一學嚇一跳。這才發(fā)現(xiàn) rust 生態(tài)，正在以一種銳不可當?shù)臍鈩荩轿弧o死角的入侵前端開發(fā)的方方面面。最關鍵的是，由于有后發(fā)優(yōu)勢，這些技術方案往往都比已有的前端方案更加先進、更加科學、性能更高...

一、Farm

Farm 是一個使用 rust 編寫的極速構建引擎。在它的宣傳文檔中，認為自己比 Webpack 快 10 倍以上，比 vite 快 5 倍。很顯然，這是一款想要精準狙擊 vite 的前端項目構建工具。

由于 vite 對于項目內的模塊采取的是請求時編譯的策略，并且對源碼不 bundle，因此，根據(jù)字節(jié)架構團隊內部的經驗，當項目規(guī)模巨大的時候，vite 的首次頁面加載時間可能長達數(shù)十秒「頁面首次加載時，加載了大量的模塊」，刷新時極其卡頓，并且由于巨大的請求量可能導致瀏覽器崩潰，影響開發(fā)體驗。

而且 vite 在開發(fā)環(huán)境使用 esbuild 進行預編譯，在生成環(huán)境使用 bundler rollup，處理方式不一樣，偶爾可能會出現(xiàn)開發(fā)環(huán)境與線上行為不一致的情況，一旦出現(xiàn)不一致，則意味著巨大的排查成本。

針對 vite 的痛點，F(xiàn)arm 使用 rust 重新實現(xiàn)了對 css/ts/js/sass 的編譯能力，能實現(xiàn)毫秒級啟動項目，對于大部分情況，能講 hmr 時間控制在 10ms 以內。

二、Turbopack

相比于 Farm，Turbopack 則顯得更加和值得信賴，并且由于 next.js 的加持，它也得到了更多的關注。

Turbopack 同樣是一款基于 rust 構建的前端項目構建工具。Turbopack 建立在新的增量架構上，在打包時只關注開發(fā)所需的最小資源，因此不管是啟動速度還是 hmr 速度，都有遠超 vite 的性能。

在具有 3000 個模塊的應用上，Turbopack 只需要 1.8s，而 Vite 需要 11.4s。

Turbopack 是由 Vercel 團隊提供的，專注于提高 Next.js 速度的打包工具。并且未來的目標是取代 webpack，成為新一代的前端打包工具。因此 Next.js 的成熟與大熱，也會帶動 Turbopack 成為更值得信賴的打包工具。

三、Rspack

Rspack 是一款由字節(jié)團隊提供的項目打包工具。和 Turbopack 一樣，它也充分發(fā)揮了 Rust 語言的性能優(yōu)勢，在打包速度上都有顯著的提升。

但是與 Turbopack 不同的是，Rspack 選擇了優(yōu)先對 webpack 生態(tài)兼容的路線。一方面，這些兼容可能會帶來一定的性能開銷，但是在實際的業(yè)務落地中，這寫性能開銷是可以接受的。另外一方面，這些兼容也使得 Rspack 可以更好的與上層框架和生態(tài)進行集成，能夠實現(xiàn)業(yè)務的漸進式遷移。

目前 Rspack 的開發(fā)團隊也在積極的招聘，很顯然，他們對于未來的發(fā)展有非常明確的規(guī)劃。

四、Vite 正在用 rust 重構

Vite 作為新一代高性能打包工具，剛出場時確實驚艷了眾人。但是架不住各種瘋狂的卷王使用 rust 彎道超車啊。Vite 反而成為了背景板，被按在地上瘋狂摩擦。因此為了能夠不在性能上被壓制太多，Vite 團隊正在基于 rust 研發(fā)各種替代方案以解決 Vite 目前的痛點。

五、Rolldown

Vite 團隊正在研發(fā) Rolldown 并且已經開源，它是使用 rust 開發(fā)的 Rollup 的替代品。它的重點將放在本地級別的性能上，同時保持與 Rollup 的兼容性。最終目標是能悄悄在 Vite 中切換到 Rolldown，并且 Vite 的使用者產生最小的影響。

不過目前來看，Vite 要實現(xiàn) rust 重構這個目標壓力很大。因此 Vite 團隊規(guī)劃了四個階段來推動這個事情。

• 替換 esbuild。
• 替換 Rollup。
• 使用 rust 實現(xiàn)常用需求的內置轉化，如編譯 ts、JSX 等。
• 使用 rust 完全重構 Vite。

六、Leptos

Leptos 是一款基于 rust 的類 React/Solid 框架。也是基于 signal 實現(xiàn)的細粒度級別的響應式更新。

基礎語法如下：

#[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 非常相似。不過在語法細節(jié)設計上，比 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 的開發(fā)者之一，并且把它作為熟悉 rust 語法學習的主要項目之一，因為這是我們前端更熟悉的領域，因此前端開發(fā)通過它掌握 rust 能達到事半功倍的效果。

當然，該工具還有很多潛力我還沒徹底挖掘到，比如官方文檔里宣稱自己是 full Stack 的框架，但是由于我還沒有消化完，所以暫時需要進一步學習才能了解。

七、dioxus

dioxus 是一個野心更大的跨平臺客戶端開發(fā)框架，與此同時，它又能做到全棧開發(fā)。它在實現(xiàn)原理與語法設計上與 Leptos 有一定的相似之處，但是在 UI 語法的表現(xiàn)上又完全不同。

一個簡單的例子可以看出來。

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!" }
  }
}

從這個語法設計就可看出，它志在一統(tǒng)江湖。試圖將 web 開發(fā)，移動端 App 開發(fā)，桌面端 App 開發(fā)等場景一網打盡。

簡單實用下來的感受就是，該框架有過渡模仿 React 的嫌疑，以致于熟悉 React 的我學習它比 Leptos 更加的得心應手。

八、Tauri

Tauri 是一款 Electron 的替代方案。

Electron 主要有兩個痛點，一是包體積太大，二是內存消耗嚴重。因此它的替代方案層出不窮。與前面介紹的幾款 rust 框架不同，Tauri 的發(fā)展已經趨于成熟，并且已經在許多商用項目中得以應用。

最最最重要的是，我已經開始讓我的學生學習它，并作為一個核心項目亮點作為自己的競爭力來應對越來越卷的面試場景。并且取得的效果還不錯。從最近這半年的面試的結果來看，許多國內的公司已經開始重視 Tauri 帶來的利好。

由于 rust 放棄了體積巨大的 Chromiun 和 nodejs，同樣的項目，打包體積可以從 electron 的 60M減少到 4M，內存消耗也能從 500M 減少到 150M 左右。

九、Servo

這是一款基于 rust 開發(fā)，并且志在取代 chrome 的瀏覽器項目。該項目是早期 Mozilla 開發(fā)的實驗性項目，由于資金有限，中間擱置了很長一段時間，現(xiàn)在眼看著 rust 大火又準備加足馬力開始搞，并且近期版本迭代非常快，此時的 Servo 已經由 Linux 基金會接管。

Servo 試圖創(chuàng)造一個大規(guī)模并行計算的頁面渲染模式，來加速渲染、布局、HTML 解析、圖像解碼等，在 Arm 架構上的測試顯示，Servo 的性能顯著優(yōu)于 Chromium。

然后我就去下載這個瀏覽器來玩了一下，結果發(fā)現(xiàn)這玩意兒還是一個簡陋版本。基本的 UI 功能還沒有做出來。并且許多頁面的布局還存在亂序的問題。

只能說暫時值得關注，有很大的發(fā)展?jié)摿ΑＳ玫脑挘赡苓€早。

十、Deno

Deno 是一款基于 rust 構建的 JavaScript 運行時。和 node.js 一樣出自于同一個大佬之手。Deno 的最新版本也是基于 rust 開發(fā)。

對我個人而言，Deno 最大的魅力在于直接原生支持 TypeScript，并且支持了 JSX/TSX。所以我非常看好 Deno 的后續(xù)發(fā)展，它正在越來越好，雖然現(xiàn)在生態(tài)還不足以于 node 抗衡。

十一、總結

很明顯可以看出，rust 正在入侵前端的方方面面，在有的方面雖不夠成熟但已表現(xiàn)出潛力，在某些方面卻已經確定了明確的優(yōu)勢。

我認為前端開發(fā)再也不能忽視 rust 的存在了。由于同時具備超高的性能于安全性，rust 在各個領域「操作系統(tǒng)層面、AI、游戲開發(fā)、服務端、跨端方案、高性能 web 應用...」都已經被高度認可，社區(qū)活躍度非常高，生態(tài)發(fā)展非常迅猛。

因此在去年年底到現(xiàn)在，我一直在投入 rust 的學習中，整體感受下來就是，從一個前端開發(fā)的角度切入去學習 rust，上手難度還是比較低的，大概花一天時間就能學完所有基礎語法，但是需要我們對內存有非常準確的理解，如果你對內存一頭霧水，可能 rust 會很難學習。

然后我們需要花更多的時間去學習 rust 的開發(fā)思維與生態(tài)，對于前端開發(fā)來說，Leptos 是一個不錯的學習練手項目。