Rust 在前端

題外話

Turbo[1] 在國外爆火，國內也不甘示弱，因爲我的朋友圈已經被刷屏了。當然最吸引我的並不是文章的內容，而是標題 《xxx 比 xxx 快 700 倍, xxx》，這句話的確出自於官網 [2]，但是標題卻讓人心生厭惡。當標題開始內卷，一大堆提速千萬倍，一文搞懂，三天精通，從此吊打，xx 爲王，xx 已死，只會造成惡性循環。

原文：
Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of Webpack and Next.js[3] at Vercel[4].

On large applications Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.

The secret to Turbopack's performance is twofold: highly optimized machine code and a low-level incremental computation engine that enables caching down to the level of individual functions. Once Turbopack performs a task it never does it again.

Our team has taken the lessons from 10 years of Webpack, combined with the innovations in incremental computation from Turborepo[5] and Google's Bazel, and created an architecture ready to support the coming decades of computing.

原文中：是在大型應用程序中，Turbopack 的更新速度比 Vite 快 10 倍，比 Webpack 快 700 倍。明確指出是在大型應用開發時的熱更新速度，而且隨着應用的體量增大，差距會越來越明顯。但標題中將 “應用體積”、“開發模式” 和“熱更新”等這些關鍵詞丟棄，似乎有點斷章取義。

我想說，如果都這麼起標題，那還是技術文章嗎？發出這樣的疑問不是想證明我自己有多清高，拉仇恨。文章是用來科普的，不是用來博眼球的。既然寫技術文章就要客觀一點，而不是斷章取義的就某一點進行誇大。標題提煉的關鍵詞既是對文章中心思想的高度概括，也是方便信息的快速檢索（如果標題都是 “一文搞懂，三天精通，從此吊打”，請問該如何對信息進行歸類整理）。

我最不能忍受的是：一篇技術文章從頭寫到尾，看不到一個引用。引用是文章的延伸閱讀，更是文章的理論支撐。如果通篇下來，看不到一處引用，這樣的文章，我想很多人心裏都是要打一個問號的（可不可信）？

有深度的往往是少數，造成精品必然不會太高產的原因是：鑽研需要花費大量的精力。遇到問題，拆解問題，提出解決方案，再到最後的沉澱輸出，都是在時間裏磨出來的。

用技術來賺錢，應該是一件值得被肯定的事情。因爲我自己也在寫文章，知道一篇文章從構思醞釀，邏輯梳理，再到最後的成品有多難。往往還是可遇不可求的，只有在遇到問題，解決問題，或者有新的思考纔會有東西可寫。一篇文章從構思到出稿少則一天，多則幾天或更長，所以真正的知識值得被肯定。投入的時間和回報往往不成比例，所以能堅持的人，更多的是用愛發電。但是知識的創作永遠都不是廉價的，應該對讀者負責。

Rust 是什麼？

A language empowering everyone to build reliable and efficient software.

一種使每個人都能建立可靠和高效的軟件的語言（系統級編程語言）。

特性

• 高性能：速度極快且內存效率極高，沒有運行時或垃圾收集器，它可以爲性能關鍵的服務提供動力，在嵌入式設備上運行，並容易與其他語言集成。

• 可靠性：豐富的類型系統和所有權模型保證了內存安全和線程安全（能夠在編譯時消除許多類錯誤）。

• 生產力：Rust 有很棒的文檔 [6]、一個帶有友好錯誤信息提示的編譯器和一流的工具（一個集成的包管理器（cargo[7]）和構建工具、具有自動完成和類型檢查的智能多編輯器支持、一個自動格式化程序等等）。

Wiki: 在計算機科學中，垃圾回收（Garbage Collection，簡稱 GC）是指一種自動的存儲器管理 [8] 機制。當某個程序佔用的一部分內存空間不再被這個程序訪問時，這個程序會藉助垃圾回收算法向操作系統歸還這部分內存空間。垃圾回收器可以減輕程序員的負擔，也減少程序中的錯誤。垃圾回收最早起源於 LISP[9] 語言。Java[10]、C#[11]、Go[12] 和 D 語言 [13] 都支持垃圾回收器。

生態

• Command Line[14] - 利用 Rust 強大的生態系統快速開發出 CLI 工具。Rust 可以幫助你可靠地維護應用程序，並輕鬆地發佈它。

• WebAssembly[15] - 使用 Rust 來增強你的 JavaScript，每個 rust crate 都對應一個 js 模塊，可以發佈到 npm[16]，用前端打包工具（webpack[17]、vite[18]、rollup[19] 等）進行捆綁。

• Networking[20] - 可預測的性能。小巧的資源佔用。穩如磐石的可靠性。Rust 是網絡服務的最佳選擇（構建高性能服務器）。

• Embedded[21] - 針對低資源的設備？需要低層次的控制而不放棄高層次的便利？Rust 可以滿足你的要求（嵌入式開發，內核開發等）。

Rust 助力前端

Rust 因其出色的表現，連續 7 年在 StackOverflow 調查中成爲最受歡迎的語言（Stack Overflow Developer Survey 2022[22]）。優秀的特性自然也受到了前端的青睞，很多大神開始基於 Rust 重寫前端生態。

個人理解，不準確的地方歡迎討論：Rust 之所以優秀是因爲它借鑑了大量編程語言的優秀特性，通過其自身的類型系統，生命週期，所有權等概念將其統一起來，成爲其安全可靠，高性能的重要保證（構建速度暫時不吐槽，畢竟團隊也在不斷努力提速中）。在編譯階段會對代碼進行檢查，拋出友好的錯誤，並給出大量指導性修改建議（很多時候都是編譯器在教我寫代碼），這在別的語言似乎很難看到。

以下是整理的相關資源，歡迎補充（瞭解更多，可以關注 lencx/awesome[23]）。

學習教程

• Awesome Rust[24] - Rust 代碼和資源的精選列表

• Rust 語言聖經 (Rust Course)[25] - 對標官方文檔，對 Rust 語言進行全面且深入的講解，輔以生動的示例和習題，語言詼諧幽默，值得一看

• Rust 語言中文社區 [26] - 每天會發布大量和 Rust 生態相關的文章，適合碎片化時間瀏覽

• Node.js ➤ Rust

• 24 days from node.js to Rust[27] - 24 篇關於 Rust 入門的系列文章，用 Rust 重寫常見的 JavaScript 任務（有大量對比示例代碼）

• Rust for Node developers[28] - 爲 Node.js 開發人員介紹 Rust 編程語言

• Rust for JavaScript peeps[29] - 瞭解 JS，想嘗試 Rust，但不知道從哪裏開始？這個給你！

• ...

生態

• Turbo[30] - Turbo 是用 Rust 編寫的一個爲 JavaScript 和 TypeScript 優化的增量捆綁器和構建系統（基於 SWC）

• SWC (Speedy Web Compiler)[31] - 是一個用 Rust 編寫的超快速 TypeScript / JavaScript 編譯器

• Deno[32] - JavaScript 和 TypeScript 的現代運行時

• Rome[33] - 是用於 JavaScript、TypeScript、JSON、HTML、Markdown 和 CSS 的格式化程序、linter、捆綁程序等，用 Rust 編寫

• Boa[34] - 一個用 Rust 編寫的實驗性 Javascript 詞法分析器、解析器和解釋器。目前，它支持部分語言

• Parcel[35] - Web 的零配置構建工具

• Lightning CSS[36] - 一個非常快速的 CSS 解析器、轉換器、捆綁器和壓縮器

• Lint

• deno_lint[37] - 用 Rust 編寫的 JavaScript 和 TypeScript 的超快 linter

• RSlint[38] - 一個快速、可定製且易於使用的 JavaScript 和 TypeScript linter（處於早期開發階段，不應在生產中使用）

• nvm[39] - Node.js 版本管理

• fnm[40] - 快速簡單的 Node.js 版本管理器，基於 Rust

• Volta[41] - JS Toolchains as Code

• wasm-pack[42] - 將 Rust 生成 WebAssembly 的一站式工具（生成可發佈的 npm 包）

• rsw[43] - wasm-pack 的增強版 CLI，支持同時 watch，build，link 多個 rust crate

• vite-plugin-rsw[44] - 基於 Vite 的 wasm-pack 插件（基於 rsw 實現）

• Tauri[45] - 構建跨平臺桌面應用，目前支持 macOS，Windows，Linux，未來也會支持 iOS/iPadOS 和 Android。後端使用 Rust，前端使用 HTML，CSS 和 JS（爲 Electron[46] 的替代品）

• Tauri 系列 [47] - 中文教程，從零到一搭建一個 Tauri 項目

• Yew[48] - 是一個現代 Rust 框架，用於使用 WebAssembly 創建多線程前端 Web 應用程序，以下是 Yew 的替代品：

• Percy[49] - 用於使用 Rust + WebAssembly 構建同構 Web 應用程序的模塊化工具包

• Seed[50] - 用於創建 Web 應用程序的 Rust 框架

• Perseus[51] - 一個狀態驅動的 Rust 網絡開發框架，完全支持服務器端渲染和靜態生成

• Sycamore[52] - 用於在 Rust 和 WebAssembly 中創建響應式 Web 應用程序的庫

• dprint-plugin-typescript[53] - TypeScript 和 JavaScript 代碼格式化插件。

• moon[54] - 用 Rust 編寫的用於 Web 生態系統的構建系統和 repo 管理工具

• Rustle[55] - 用 Rust 重寫的 Svelte 編譯器

• typed-html[56] - Type checked JSX for Rust

• Rolldown[57] - 100% API 兼容的 Rust 版 Rollup，實現正在進行中（似乎停止更新）

• Relay[58] - Relay 編譯器使用 Rust 重寫

• ...

References

[1]

Turbo: https://turbo.build/

[2]

出自於官網: https://turbo.build/pack/docs

[3]

Next.js: https://nextjs.org/

[4]

Vercel: https://vercel.com/

[5]

Turborepo: https://turbo.build/repo

[6]

文檔: https://doc.rust-lang.org/rustdoc/what-is-rustdoc.html

[7]

cargo: https://doc.rust-lang.org/cargo/

[8]

存儲器管理: https://zh.wikipedia.org/wiki/%E8%A8%98%E6%86%B6%E9%AB%94%E7%AE%A1%E7%90%86

[9]

LISP: https://zh.wikipedia.org/wiki/LISP

[10]

Java: https://zh.wikipedia.org/wiki/Java

[11]

C#: https://zh.wikipedia.org/wiki/C_Sharp

[12]

Go: https://zh.wikipedia.org/wiki/Go

[13]

D 語言: https://zh.wikipedia.org/wiki/D%E8%AF%AD%E8%A8%80

[14]

Command Line: https://www.rust-lang.org/what/cli

[15]

WebAssembly: https://www.rust-lang.org/what/wasm

[16]

npm: https://www.npmjs.com/

[17]

webpack: https://webpack.js.org/

[18]

vite: https://vitejs.dev/

[19]

rollup: https://rollupjs.org/guide/en/

[20]

Networking: https://www.rust-lang.org/what/networking

[21]

Embedded: https://www.rust-lang.org/what/embedded

[22]

Stack Overflow Developer Survey 2022: https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-programming-scripting-and-markup-languages

[23]

lencx/awesome: https://github.com/lencx/awesome

[24]

Awesome Rust: https://github.com/rust-unofficial/awesome-rust

[25]

Rust 語言聖經 (Rust Course): https://course.rs/

[26]

Rust 語言中文社區: https://rustcc.cn/

[27]

24 days from node.js to Rust: https://vino.dev/blog/node-to-rust-day-1-rustup/

[28]

Rust for Node developers: https://github.com/Mercateo/rust-for-node-developers

[29]

Rust for JavaScript peeps: https://github.com/yoshuawuyts/rust-for-js-peeps

[30]

Turbo: https://turbo.build/

[31]

SWC (Speedy Web Compiler): https://swc.rs/

[32]

Deno: https://deno.land/

[33]

Rome: https://rome.tools/

[34]

Boa: https://github.com/boa-dev/boa

[35]

Parcel: https://github.com/parcel-bundler/parcel

[36]

Lightning CSS: https://lightningcss.dev/

[37]

deno_lint: https://github.com/denoland/deno_lint

[38]

RSlint: https://github.com/rslint/rslint

[39]

nvm: https://github.com/nvm-sh/nvm

[40]

fnm: https://github.com/Schniz/fnm

[41]

Volta: https://github.com/volta-cli/volta

[42]

wasm-pack: https://github.com/rustwasm/wasm-pack

[43]

rsw: https://github.com/rwasm/rsw-rs

[44]

vite-plugin-rsw: https://github.com/rwasm/vite-plugin-rsw

[45]

Tauri: https://tauri.app/

[46]

Electron: https://www.electronjs.org/

[47]

Tauri 系列: _https://mp.weixin.qq.com/mp/appmsgalbum?_biz=MzIzNjE2NTI3NQ==&action=getalbum&album_id=2593843659863752704

[48]

Yew: https://yew.rs/

[49]

Percy: https://github.com/chinedufn/percy

[50]

Seed: https://github.com/seed-rs/seed

[51]

Perseus: https://github.com/arctic-hen7/perseus

[52]

Sycamore: https://github.com/sycamore-rs/sycamore

[53]

dprint-plugin-typescript: https://github.com/dprint/dprint-plugin-typescript

[54]

moon: https://github.com/moonrepo/moon

[55]

Rustle: https://github.com/pintariching/rustle

[56]

typed-html: https://github.com/bodil/typed-html

[57]

Rolldown: https://github.com/rolldown-rs/rolldown

[58]

Relay: https://github.com/facebook/relay/tree/main/compiler

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ghoqI34_UgkHh82V2igMYg