大家好，很高興又見面了，我是"高級前端‬進階‬"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點讚、收藏、轉發!

前言

Rust 由前 Mozilla 開發人員 Graydon Hoare 於 2006 年創建，作為 C++ 語言的替代品。可用於創建網絡軟體、嵌入式計算機和分布式服務、命令行工具等等。

在 Stack overflow 2020 的調查中，Rust 被選為最受歡迎的程式語言第一名，這是因為 86% 的開發人員表示會繼續在開發項目中使用它。其實，自 2016 年以來，Rust 一直在調查中獲勝。在 Tiobe 指數上，Rust 的受歡迎程度也在逐步上升。

根據2023年的最新數據，Rust在所有語言的排名中處於第20位，小於 Go（11）< PHP（10）< JavaScript（7）< Java（4）< C++（3） < C（2）< Python（1）。但是從整體數據來看，Rust的使用量已經在逐步增加(+0.16)，而PHP（-0.49）、Go（-0.12）都處於下降階段。

同時從下圖就能看出，2012年到2023年的 tiobe 指數表明，Rust幾乎處於明顯的上升趨勢，而且非常亮眼。從Rust的企業覆蓋來說已經算是火的不能再火了。比如：微軟打算將部分基建從C++過渡到Rust，谷歌宣布支持使用 Rust 開發 Chromium，Dropbox、Sentry、Amazon 和 Mozilla等也在積極布局Rust，甚至Linux內核都已經支持Rust開發等。

既然 Rust 如此受歡迎，今天就帶著大家一起看看 Rust 如何火到了前端圈，介紹幾個基於Rust 開發的優秀前端項目。當然，針對每一個項目都不會過多的展開，如果比較感興趣可以繼續在我的主頁閱讀。話不多說，直接開始！

SWC

SWC（Speedy Web Compiler）是一個可擴展的基於 Rust 的平台，用於下一代快速開發工具。 Next.js、Parcel 和 Deno 等工具以及 Vercel、字節、騰訊等諸多網際網路公司都在使用 SWC。

在 Github 上，SWC 已經有超過 26.3k 的 star 和 1k 的 fork，每周的平均下載量達到了 1983k。目前有超過 6.2k 的項目使用 SWC、項目貢獻人數也達到了 200+，增長勢頭非常迅猛。可通過如下命令一鍵安裝、試用：

npm i -D @swc/cli @swc/core

SWC 可用於編譯和打包工作，是一個超快速的 JavaScript 編譯器。對於編譯，SWC 讀取 JavaScript / TypeScript 文件，並輸出所有主流瀏覽器都支持的代碼。在性能上，SWC 比其他打包方案具有明顯的優勢。數據表明，使用 SWC 替換 Babel ，打包速度提升20x~60x!

Turbo

Turbo 是用 Rust 編寫的用於前端開發的下一代工具鏈。它由3個主要部分組成：

Turbopack：增量打包器（Webpack 的後繼者
Turborepo：增量構建系統
Turbo 引擎：低級增量計算和記憶引擎

Turbopack 建立在 Turbo 的增量架構之上，Turbo 可以緩存程序中任何函數的執行結果。當程序再次運行時，函數不會重新運行而是直接從緩存讀取，除非函數的輸入內容發生變化。這種細粒度的架構調整使得程序能夠在函數級別跳過重複大量工作，最終給打包性能帶來明顯的提升。可以通過如下命令一鍵創建Turbopack項目：

npx create-next-app --example with-turbopack

數據表明：在大型應用程式上，Turbopack更新速度比 Webpack 快 700 倍。與Vite相比，在具有 5,000 個模塊的應用程式上，Turbopack 需要 4 秒才能啟動，而 Vite（帶有 SWC）需要 16.6 秒。

Tauri

Tauri是一個為所有桌面平台構建小巧、快速的二進位文件的框架。開發人員可以集成任何編譯為 HTML、JS 和 CSS 的前端框架來構建用戶界面。Tauri 是目前最流行的 Electron 替代方案，通過使用 Rust 和 Webview2 成功解決了 Electron 的包體積大、內存占用高的諸多問題。

Tauri在設計上保證安全性、高性能、以及與所有前端框架的兼容，允許為所有桌面平台（包括 macOS、Windows 和 Linux 作業系統）創建可執行應用程式。

目前，Tauri 在Github上擁有 59.7K 星和 1.5K GitHub 分支。所以，目前使用Electron方案的桌面程序如果成本不大，可以考慮下使用Tauri。可通過下面命令一鍵創建Tauri項目：

npm create tauri-app

Deno

Deno（/diːnoʊ/，發音為 dee-no）是一個安全的 JavaScript、TypeScript 和 WebAssembly 運行時，為開發人員提供出色的研發體驗。其建立在 V8、Rust 和 Tokio 之上，由以下幾個核心部分組成：

Rust（Deno 的核心是用 Rust 編寫的，Node 的核心是用 C++ 編寫的）
Tokio（用 Rust 編寫的事件循環）
TypeScript（Deno 開箱即用地支持 JavaScript 和 TypeScript）
V8（Google 的 JavaScript 運行時用於 Chrome 和 Node 等）

Deno 具有沙盒功能，更加安全，支持開箱即用的 TypeScript 和可靠的標準包集合。儘管如此，Deno 尚未被視為真正的 node.js 競爭者。最大的劣勢是缺失了目前 Node.js 生態多達 150 萬的通用 npm 包。相比之下，目前只有大約 5000 個 Deno 模塊可用。

當然，隨著Deno V1.31的發布，其和Node.js已經越來越近了。

注意：從性能上說，在HTTP 吞吐量、請求延遲等方面Node.js和Deno也是各有所長

Rome

Rome 是 Babel 、Yarn團隊作者做的基於 Nodejs 的前端基建全家桶，包含但不限於： Babel、 ESLint、webpack,、Prettier、Jest等等，目前已經成功遷移到Rust。

Rome 是個全家桶 API，所以開發者只需要 yarn add rome 就完成了所有環境準備工作。

rome bundle ：打包項目。
rome compile ：編譯單個文件。
rome develop ：調試項目。
rome parse ：解析文件抽象語法樹。
rome analyzeDependencies：分析依賴。

Rome 還將文件格式化與 Lint 合併為了 rome check 命令，並提供了友好 UI 終端提示。以下是 Rome 的核心特點：

快速：用 Rust 和受 rust-analyzer 啟發的創新架構構建，能夠更快地完成更多工作。
簡單：零配置，但支持選項擴展
可擴展：旨在處理任何規模的代碼庫，專注於產品而不是工具。
高優化：通過緊密的內部集成，能夠重用以前的工作，並且對一個工具的任何改進都會改進它們。
可操作且信息豐富：避免模糊的錯誤消息，當告訴開發者問題時，會準確告訴開發者問題出在哪裡以及如何解決
開箱即用：使用的所有語言功能都開箱支持，比如 TypeScript 和 JSX 的支持

lightningcss

用 Rust 編寫的極其快速的 CSS 解析器、轉換器和代碼壓縮器。將它與 Parcel 一起使用，作為獨立的庫或 CLI，或通過插件與任何其他工具一起使用。

速度極快：解析和縮小大文件在幾毫秒內完成，通常輸出比其他工具小得多。
類型化的屬性值：許多其他 CSS 解析器將屬性值視為一系列未類型化的標記。這意味著每個想要對這些值執行某些操作的轉換器都必須重複解析，從而導致重複工作和不一致。 Lightning CSS 使用 CSS 規範中的語法解析所有值，並為每個屬性公開特定的值類型。
瀏覽器級解析器：Lightning CSS 建立在由 Mozilla 創建並由 Firefox 和 Servo 使用的 cssparser 和選擇器 crates 的基礎上。
代碼壓縮：lightning CSS 的主要目的之一是縮小 CSS 以使其更小。
支持供應商前綴：Lightning CSS 接受瀏覽器目標列表，並自動添加供應商前綴。
瀏覽器列表配置：Lightning CSS 支持選擇加入瀏覽器列表配置
語法檢測：Lightning CSS 解析現代 CSS 語法，並根據瀏覽器目標在需要時生成更兼容的輸出。

Yew

Yew 是一個現代 Rust 框架，用於使用 WebAssembly 創建多線程前端 Web 應用程式。Yew具有一個宏，用於使用 Rust 表達式聲明交互式 HTML。在 React 中使用過 JSX 的開發人員在使用 Yew 時應該會很輕鬆。

Yew通過最小化每個頁面呈現的 DOM API 調用並輕鬆將複雜處理交給後台Web Worker來實現高性能。同時，Yew支持與JavaScript 的互操作性，允許開發人員利用 NPM 包並與現有的 JavaScript 應用程式集成。

注意：Yew 還未達到穩定的1.0版本，後續版本改動可能會帶來破壞性改動。

WRY

WRY是Rust 中的跨平台 WebView 渲染庫，支持所有主要桌面平台，如 Windows、macOS 和 Linux等等。

WRY 連接各個平台的 Web 引擎，並提供易於使用和統一的接口來渲染 WebView。它還將 TAO 重新導出為事件循環和窗口創建的模塊。創建窗口和瀏覽網站的最小示例代碼如下：

fn main() -> wry::Result<()> {
  use wry::{
    application::{
      event::{Event, StartCause, WindowEvent},
      event_loop::{ControlFlow, EventLoop},
      window::WindowBuilder,
    },
    webview::WebViewBuilder,
  };

  let event_loop = EventLoop::new();
  let window = WindowBuilder::new()
    .with_title("Hello World")
    .build(&event_loop)?;
  let _webview = WebViewBuilder::new(window)?
    .with_url("https://tauri.studio")?
    .build()?;

  event_loop.run(move |event, _, control_flow| {
    *control_flow = ControlFlow::Wait;

    match event {
      Event::NewEvents(StartCause::Init) => println!("Wry has started!"),
      Event::WindowEvent {
        event: WindowEvent::CloseRequested,
        ..
      } => *control_flow = ControlFlow::Exit,
      _ => (),
    }
  });
}

WGPU

WebGPU 是由 W3C 發布的規範，目標是讓網頁代碼能安全可靠地訪問 GPU 功能。其實現方式借鑑了 Vulkan API，會翻譯到宿主硬體所用的各式 API（如 DirectX、Metal、Vulkan 等）上執行。

WGPU是基於WebGPU API的Rust的安全且可攜式圖形庫。它適用於通用圖形，並在GPU上計算。使用WGPU的應用也可以在Vulkan，Metal，DirectX 11/12和OpenGL ES上本地運行，以及WebGPU和WebGL2上的WebAssembly瀏覽器上運行。

Napi-rs

NAPI-RS 是一個框架，用於在 Rust 中構建預編譯的 Node.js 插件（Addons）。

NAPI-RS具有以下特點：

帶來node.js的本地性能
‍♂️內存安全，由Rust編譯器保證
⚡️在Node.js和Rust之間通過Buffer 和 TypedArray實現零複製數據
⚙️幾行代碼快速實現並行操作

use napi_derive::napi;
#[napi]
fn fibonacci(n: u32) -> u32 {
  match n {
    1 | 2 => 1,
    _ => fibonacci(n - 1) + fibonacci(n - 2),
  }
}

兼容 CommonJS 和 esm，同時自動生成 .d.ts 文件。

本文總結

本文主要和大家介紹讓 Rust 火遍前端圈的幾個明星項目，包括：SWC、Turbopack 、Deno 、Tauri、Rome、lightningcss 、Yew、WRY、WGPU、NAPI-RS等等。因為篇幅有限，文章並沒有過多展開，針對其中的任何一個項目我都有單獨出文章進行詳細介紹，大家可以從我的主頁查看、閱讀。如果有興趣，文末的參考資料提供了大量優秀文檔以供學習。

參考資料

https://swc.rs/

https://wgpu.rs/

https://github.com/swc-project/swc

https://tauri.app/

https://rome.tools/

https://juejin.cn/post/7033196853218770980

https://dev.to/hackmamba/exploring-yew-the-rust-based-frontend-framework-as-a-vue-developer-3915

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

讓 Rust 火遍前端圈的 10 個明星項目！

前言

SWC