身為前端開發者,你每天都在跟 JavaScript、TypeScript 打交道。但你有没有想過:那些讓你打包變快、編譯變順的工具——像是 esbuild、SWC(取代 Babel 的新一代轉譯器)、甚至 Next.js 的 Turbopack——它們的底層根本不是 JavaScript 寫的,而是用 Rust 寫的?這門看似「系統級」的語言,其實正悄悄滲透到你我的前端工具鏈。本文帶你從零認識 Rust,理解它憑什麼做到「記憶體安全又高效能」,以及它和前端世界的連結在哪。
一、Rust 是什麼?為什麼前端開發者該認識它
Rust 是 Mozilla 主導開發的系統程式語言,目標是在不靠垃圾回收(GC)的前提下,保證記憶體安全。傳統上,要嘛像 C/C++ 那樣手動管理記憶體(快但容易出 bug),要嘛像 Java/Go 那樣用 GC(安全但會有停頓)。Rust 用一套獨特的「所有權(ownership)」機制,在編譯期就擋掉絕大多數記憶體錯誤,既不慢、又不崩。
對前端來說,Rust 的價值體現在兩個地方:一是工具鏈(esbuild/SWC/Turbopack 都用 Rust 重寫,速度提升數倍到數十倍);二是WebAssembly——Rust 是第一梯隊的 WASM 語言,能把高效能運算(圖像處理、加密、遊戲)跑進瀏覽器。
二、核心觀念:所有權與借用
Rust 最讓新手頭痛、也最強大的設計是所有權。每個值有且只有一個擁有者,當擁有者離開作用域,值會自動釋放;想讓別人暫時使用,要用「借用(&)」,且編譯器會檢查不能同時有多個可寫借用。
這套規則讓你不需要 GC 也不會有懸空指標。剛開始會被編譯器「唸」得很煩,但一旦通過編譯,運行期几乎不會出記憶體相關的崩潰——這正是它吸引大型專案的原因。
三、步驟 1:安裝與寫出第一支程式
先安裝官方工具鏈 rustup(內含編譯器 rustc 與套件管理員 cargo):
# 安裝(官網一鍵腳本,Windows 用 rustup-init.exe)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# 確認版本
rustc --version
cargo --version
# 新建專案並執行
cargo new hello_rust
cd hello_rust
cargo run
預設產生的 src/main.rs 長這樣:
fn main() {
let name = "前端工程師";
println!("你好,{}!", name);
}
四、步驟 2:用結構與函數體會型別系統
Rust 是靜態強型別,但多數時候能自動推斷。下面示範一個簡單的結構(struct)與方法:
struct Article {
title: String,
views: u32,
}
impl Article {
fn new(title: &str) -> Self {
Self { title: title.to_string(), views: 0 }
}
fn bump(&mut self) {
self.views += 1;
}
}
fn main() {
let mut a = Article::new("從 Rust 開始");
a.bump();
println!("{} 觀看數:{}", a.title, a.views);
}
重點: &mut self 表示這個方法會可變借用實例,編譯器會保證同一時間沒有別人也在改它——這就是「編譯期執行緒安全」的來源。
五、步驟 3:把 Rust 編譯成 WebAssembly 跑進前端
這是和前端最有關的一步。安裝 wasm 目標後,用 wasm-pack 就能把 Rust 函數打包成 npm 套件,在 React/Vue 裡直接呼叫:
# 加入 wasm 編譯目標
rustup target add wasm32-unknown-unknown
# 安裝打包工具
cargo install wasm-pack
# 在專案目錄打包
wasm-pack build --target web
打包後會產生 pkg/ 資料夾,前端只要 import 就能用,適合拿來做加密運算、影像濾鏡、物理模擬這類 JS 跑得慢的場景。
六、Rust 與前端工具鏈的實戰連結
如果你不想直接寫 Rust,也能間接受益:把專案的 Babel 換成 SWC、把 webpack 的某些 loader 換成 Rust 實作,建置速度往往直接砍半。Vite 底層的 esbuild 就是 Go 寫的,Rust 陣營則有 Oxc、Turbopack 等新一代工具正在崛起。重點: 理解 Rust 的價值,能幫你在技術選型時看懂「為什麼新工具都號稱快十倍」。
- 想入門系統程式設計:Rust 是 C++ 最平滑的現代替代
- 想優化前端效能:關注 SWC / Oxc / Turbopack 等 Rust 工具
- 想做瀏覽器內高效能運算:用 wasm-pack 把 Rust 跑進 WASM
互動話題:你目前的前端專案裡,有沒有哪段邏輯是 JS 跑得吃力、你會想用 Rust + WASM 加速的?或者你已經在用 SWC / Turbopack 了嗎?歡迎在留言區分享你的經驗!