概述

本文將從 Rust 的歷史，前端的使用場景和業(yè)界使用案例一步步帶你走進(jìn) Rust的世界。并且通過一些簡單的例子，了解 Rust 如何應(yīng)用到前端，提高前端的生產(chǎn)效率。

Rust簡史

2006年，軟件開發(fā)者Graydon Hoare在Mozilla工作期間，開始了Rust作為一個個人項(xiàng)目。根據(jù)他在麻省理工技術(shù)評論的一次采訪，Rust的靈感來自于Hoare公寓樓里一個壞掉的電梯。電梯操作系統(tǒng)的軟件崩潰了，Hoare意識到這類問題通常源于程序如何使用內(nèi)存的問題。

通常，這些類型設(shè)備的軟件是用C或C++編寫的，但這些語言需要大量的內(nèi)存管理，可能導(dǎo)致系統(tǒng)崩潰的錯誤。因此，Hoare著手研究如何創(chuàng)建一種既緊湊又無內(nèi)存錯誤的編程語言。

Mozilla 于2009年開始贊助這個項(xiàng)目，并且在2010年首次公開。也在同一年，其編譯器源代碼開始由原本的 OCaml 語言轉(zhuǎn)移到用 Rust 語言，進(jìn)行自我編譯工作，稱作“rustc”，并于2011年實(shí)際完成。這個可自我編譯的編譯器在架構(gòu)上采用了 LLVM 作為它的后端。

第一個有版本號的Rust編譯器于2012年1月發(fā)布。Rust 1.0是第一個穩(wěn)定版本，于2015年5月15日發(fā)布。

2021年2月8日，AWS、華為、Google、微軟以及 Mozilla 宣布成立Rust基金會，并承諾在兩年時間里每年投入不少于 100 萬美元的預(yù)算，以用于 Rust 項(xiàng)目的開發(fā)、維護(hù)和推廣

根據(jù)Rust 最新官方新聞，谷歌日前宣布向 Rust 基金會捐款 100 萬美元，這筆資金將用于改善 C++ 與 Rust 互操作性。谷歌當(dāng)前正在使用 Rust 語言重寫在 Linux 核心之外的 Android 關(guān)鍵安全組件，從而進(jìn)一步減少安全漏洞。而在 Android 13 中，就已經(jīng)有約 21％的新原生代碼使用 Rust 語言開發(fā)。

Rust在前端能夠干什么？

• SWC: 基于 Rust 的前端構(gòu)建工具，可以理解為 Rust 版本的 Babel，但是性能有 10 倍提升。目前被 Next.js、Deno , Rspack等使用。
• Tauri：Tauri 是目前最流行的 Electron 替代方案，通過使用 Rust 和 Webview2 成功解決了 Electron 的包體積大和內(nèi)存占用高的問題。Atom 團(tuán)隊(duì)也是看到了 Tauri 的成功，才決定基于 Rust 去做 Zed 編輯器。
• Parcel2：零配置構(gòu)建工具，特點(diǎn)是快速編譯和不需要配置，和 Vite、Webpack等打包比起來更加簡單，而且是基于 Rust 開發(fā)
• Biome: 旨在取代許多現(xiàn)有的 JavaScript 工具，集代碼檢測、打包、編譯、測試等功能于一身。
• Rspack: 基于 Rust 的高性能 Web 構(gòu)建工具, 對標(biāo) Webpack, 兼容大部分Webpack api
• Rocket: 可以幫助開發(fā)人員輕松編寫安全的Web應(yīng)用程序, 對標(biāo) Expressjs，性能卓越，具體參考 Web Frameworks Benchmark
• Yew: 使用 Rust 開發(fā) h5 頁面，支持類 jsx 的語法，和 React 類似開發(fā)前端網(wǎng)頁，打包產(chǎn)物是 wasm，挺有趣。
• Napi-rs: 用 Rust 和 N-API 開發(fā)高性能 Node.js 擴(kuò)展，可以替代之前用 C++ 開發(fā)的 Node.js 擴(kuò)展，許多基于 Rust 語言開發(fā)的前端應(yīng)用都結(jié)合這個庫進(jìn)行使用。

Rust為什么大受歡迎

• 高性能：所有程序都必須管理其運(yùn)行時使用計(jì)算機(jī)內(nèi)存的方式。一些語言(比如：JavaScript )中具有垃圾回收機(jī)制，在程序運(yùn)行時不斷地尋找不再使用的內(nèi)存，在另一些語言中，程序員必須親自分配和釋放內(nèi)存。Rust 則選擇了第三種方式：通過所有權(quán)系統(tǒng)管理內(nèi)存，編譯器在編譯時會根據(jù)一系列的規(guī)則進(jìn)行檢查。如果違反了任何這些規(guī)則，程序都不能編譯。正是這種內(nèi)存管理機(jī)制，使得 Rust 有驚人的內(nèi)存利用率。
• 內(nèi)存安全：Rust 豐富的類型系統(tǒng)和所有權(quán)模型保證了內(nèi)存安全，讓你在編譯期就能夠消除各種各樣的錯誤。Rust 通過所有權(quán)系統(tǒng)管理內(nèi)存，編譯器在編譯時會根據(jù)一系列的規(guī)則進(jìn)行檢查，如果違反了任何這些規(guī)則，程序都不能編譯。
• 線程安全：Rust 通過一整套基礎(chǔ)設(shè)施和類型檢查，強(qiáng)迫這些線程問題暴露在編譯階段，相比花費(fèi)大量時間嘗試重現(xiàn)運(yùn)行時并發(fā) bug 出現(xiàn)的特定情況，Rust 會拒絕編譯不正確的代碼并提供解釋問題的錯誤信息。

同時大量頭部公司比如華為，微軟，字節(jié)的應(yīng)用和推廣，使得rust快速占領(lǐng)著前端基礎(chǔ)設(shè)施領(lǐng)域。Webpack、Babel、Prettier 這些熱門工具都已有了 Rust 替代方案，且性能有著 10～100 倍的提升。任何能夠用 Rust 實(shí)現(xiàn)的應(yīng)用系統(tǒng)，最終都必將用 Rust 實(shí)現(xiàn)。

Rust 缺點(diǎn)

1. 學(xué)習(xí)曲線陡峭：Rust 擁有復(fù)雜的語法和嚴(yán)格的規(guī)則，對于初學(xué)者來說可能會感到困難和挑戰(zhàn)。
2. 編譯時間長：由于 Rust 的編譯器進(jìn)行了大量的靜態(tài)檢查和優(yōu)化，編譯時間可能相對較長，特別是對于大型項(xiàng)目。希望未來 Rust 針對這塊做出更多優(yōu)化
3. 生態(tài)系統(tǒng)相對不太完善：相比其他編程語言，Rust 的生態(tài)系統(tǒng)相對較小，可能缺乏一些常見的庫和工具。
4. 錯誤處理繁瑣：Rust 采用了 Result 和 Option 等類型來處理錯誤和空值，這要求開發(fā)人員進(jìn)行顯式的錯誤處理，導(dǎo)致一些額外的編碼工作量。

Rust 生產(chǎn)實(shí)踐優(yōu)秀案例

Rust語言在IM客戶端的實(shí)踐 (https://juejin.cn/post/7336022842856177690)

結(jié)合了 Rust 語言的優(yōu)點(diǎn)，成功地解決高并發(fā)接待 & 多開。

給 Web 前端工程師看的用 Rust 開發(fā) wasm 組件實(shí)戰(zhàn)(https://juejin.cn/post/7308434321764794378)

利用 Rust 生成的wasm，處理大量計(jì)算的場景，取得很好的收益。(https://juejin.cn/post/7303347466219569203)

Bundler 的設(shè)計(jì)取舍：為什么要開發(fā) Rspack?

文章作者通過使用了 Webpack、Vite、Esbuild、Rollup 等構(gòu)建工具，對各個工具的優(yōu)劣處和設(shè)計(jì)取舍后決定采用rust提升構(gòu)建工具的性能。

通過上面幾個案例我們可以看到，對于前端我們前端來說，利用 Rust 可以做一些計(jì)算量比較大wasm和一些構(gòu)建工具相關(guān)的基礎(chǔ)設(shè)施收益還是比較大的。當(dāng)然也可以做跨端應(yīng)用，可以參考用 Rust 實(shí)現(xiàn)跨平臺開發(fā)(iOS/Android/Web)經(jīng)驗(yàn)分享(https://zhuanlan.zhihu.com/p/677550790)

Rust 在 WebAssembly 中的應(yīng)用

WebAssembly 是什么？

WebAssembly 是一門不同于 JavaScript 的語言，WebAssembly 是一門低級的類匯編語言。它有一種緊湊的二進(jìn)制格式，使其能夠以接近原生性能的速度運(yùn)行，并且為諸如 C++ 和 Rust 等擁有低級的內(nèi)存模型語言提供了一個編譯目標(biāo)以便它們能夠在網(wǎng)絡(luò)上運(yùn)行。

wasm二進(jìn)制內(nèi)容如下圖

圖片

如何生成 WebAssembly？

• 使用 Emscripten 移植一個 C/C++ 應(yīng)用程序。
• 直接在匯編層，編寫或生成 WebAssembly 代碼。
• 編寫 Rust 程序，將 WebAssembly 作為它的輸出。
• 使用 AssemblyScript，它類似于 TypeScript 并且可編譯成二進(jìn)制 WebAssmebly 代碼

由于 Rust 生態(tài)天然支持 WebAssembly，并且有專門的生態(tài)去跟蹤和優(yōu)化WebAssembly，我們可以利用 Wasm-Pack 腳手架生成 Wasm 項(xiàng)目。

首先安裝 Rust 相關(guān)的環(huán)境，和 wasm-pack 腳手架。

這是一個可以直接將你的 Rust 代碼打包成 Npm 包的工具，用法十分簡單，只有 4 個命令：

• new：使用模板生成一個新的 Rust Wasm 項(xiàng)目
• build: 從 Rust Wasm Crate 生成一個 Npm Wasm Pkg
• test：運(yùn)行瀏覽器測試
• pack 和 publish：創(chuàng)建壓縮包，發(fā)布到鏡像倉庫

圖片

Pkg hello_wasm.js 就是最終wasm 入口文件，

html中異步引入

const { default: init } = await import("./pkg/hello_wasm.js");
const res = await init();

異步引入 hello_wasm.js 后，會自動加載 hello_wasm_bg.wasm 二進(jìn)制文件，res 可以獲取從二進(jìn)制得到的變量。間接從獲得了從 Rust 語言到 Js 傳遞，當(dāng)然 Rust 也可以調(diào)用 Js 的方法，可以通過

#[wasm_bindgen(js_namespace = console)]

通過在 Rust 函數(shù)或結(jié)構(gòu)體上使用 #[wasm_bindgen] 屬性和相應(yīng)的配置，我們可以將 Rust 代碼暴露給 JavaScript 使用，以實(shí)現(xiàn)跨語言的交互和調(diào)用。在這種情況下，#[wasm_bindgen(js_namespace = console)] 指定了 JavaScript 中的 console 對象的命名空間，使得我們可以使用類似于 

console.log() 的方式在 Rust 中輸出到 JavaScript 的控制臺。

Rust 和 Node 的綁定

哪些功能適合用 Native Addon 來完成

• 簡單的輸入輸出但是中間邏輯復(fù)雜的計(jì)算邏輯，比如直接用到 CPU simd 指令的 @node-rs/crc32 , 或者加密算法 @node-rs/bcrypt, 中文分詞 @node-rs/jieba 。這些庫的邏輯都有一個共同點(diǎn)：輸入輸出都非常簡單(避免額外的 N-API 調(diào)用)， 中間計(jì)算邏輯非常復(fù)雜。
• 一些需要調(diào)用系統(tǒng)級 API 能力的庫，比如提到的 SIMD 指令，還有類似 GPU 調(diào)用等。

社區(qū)已經(jīng)有成熟的 Napi-rs 來封裝 Native Addon。

首先通過安裝 Napi-rs 腳手架生成項(xiàng)目

圖片

生成的項(xiàng)目大概長這種模樣。通過執(zhí)行 npm run build 我們可以生成 index.js和 napi-demo.darwin-arm64.node 二進(jìn)制文件。

const demo = require("./index.js");

引入 index.js 就可以獲取到 Rust lib.rs 中暴露的變量和方法了。其實(shí)像 Swc，Rspack 這些重計(jì)算的工具底層也是通過此庫進(jìn)行 Rust 語言和 Nodejs 進(jìn)行交互的。Rust 提供一些核心底層能力，Node 可以結(jié)合現(xiàn)有的生態(tài)調(diào)用經(jīng)過 Rust生成二進(jìn)制文件創(chuàng)造更多性能卓越的應(yīng)用。

總結(jié)

隨著前端開發(fā)越來越卷，前端基建的效率也將是下一個值得投入的地方。并且隨著 Rust 和 WebAssembly 發(fā)展，網(wǎng)頁應(yīng)用也有很大的發(fā)展空間。最后希望在深入學(xué)習(xí) Rust 后，做出一些有意思的應(yīng)用。

附錄

https://zhuanlan.zhihu.com/p/101118828

https://developer.mozilla.org/zh-CN/docs/WebAssembly/Rust_to_wasm

https://zhuanlan.zhihu.com/p/234914336

https://www.zhihu.com/question/603518666/answer/3256663127

https://juejin.cn/post/7336022842856177690

https://juejin.cn/post/7317854227748847616

https://zhuanlan.zhihu.com/p/677550790

https://zh.wikipedia.org/zh-cn/Rust

https://juejin.cn/post/7076354498691596325