Rust + WebAssembly：讓前端計算效能飆升 20 倍的實戰路徑

為什麼前端需要 Rust + WASM？

JavaScript 是優秀的語言，但在計算密集型任務上存在硬限制：

任務              JS 耗時     Rust/WASM 耗時    加速比
圖片壓縮(4K)       3200ms      180ms             17.8x
SHA-256(100MB)     4500ms      280ms             16.1x
JSON 解析(50MB)     890ms       52ms             17.1x
PDF 渲染(100頁)    5600ms      310ms             18.1x
正則匹配(大文字)    1200ms       85ms             14.1x

15-20 倍效能提升——這就是 Rust + WASM 的價值。

---

Rust → WASM 完整工作流

1. 專案初始化

# 安裝工具鏈
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

# 建立專案
cargo new --lib image-processor
cd image-processor

2. Cargo.toml 設定

[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = { version = "0.3", features = [
  "ImageData",
  "HtmlCanvasElement",
  "CanvasRenderingContext2d",
] }

[dependencies.image]
version = "0.25"
default-features = false
features = ["png", "jpeg"]

[profile.release]
opt-level = 3
lto = true
strip = true

3. Rust 核心程式碼

use wasm_bindgen::prelude::*;
use image::{DynamicImage, ImageFormat};

#[wasm_bindgen]
pub struct ImageProcessor {
    image: DynamicImage,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(data: &[u8]) -> Result<ImageProcessor, JsValue> {
        let image = image::load_from_memory(data)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(ImageProcessor { image })
    }

    pub fn resize(&self, width: u32, height: u32) -> Result<Vec<u8>, JsValue> {
        let resized = self.image.resize_exact(width, height, image::imageops::FilterType::Lanczos3);
        let mut buf = Vec::new();
        resized.write_to(&mut buf, ImageFormat::Png)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(buf)
    }

    pub fn grayscale(&self) -> Result<Vec<u8>, JsValue> {
        let gray = self.image.grayscale();
        let mut buf = Vec::new();
        gray.write_to(&mut buf, ImageFormat::Png)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(buf)
    }

    pub fn compress_jpeg(&self, quality: u8) -> Result<Vec<u8>, JsValue> {
        let mut buf = Vec::new();
        let mut encoder = image::codecs::jpeg::JpegEncoder::new_with_quality(&mut buf, quality);
        encoder.encode(
            self.image.as_bytes(),
            self.image.width(),
            self.image.height(),
            self.image.color(),
        ).map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(buf)
    }
}

4. 構建與發布

# 構建
wasm-pack build --target web --release

# 產物結構
pkg/
├── image_processor.js        # JS 繫結
├── image_processor_bg.wasm   # WASM 二進位
├── image_processor.d.ts      # TypeScript 型別
└── package.json

5. 前端整合

import init, { ImageProcessor } from './pkg/image_processor';

async function processImage(file: File) {
  await init();

  const data = new Uint8Array(await file.arrayBuffer());
  const processor = new ImageProcessor(data)?;

  // 壓縮為 JPEG，品質 80
  const compressed = processor.compress_jpeg(80);

  // 調整尺寸
  const resized = processor.resize(800, 600);

  // 轉灰階
  const grayscale = processor.grayscale();

  processor.free(); // 釋放 WASM 記憶體

  return { compressed, resized, grayscale };
}

---

效能最佳化技巧

1. 避免頻繁的 JS↔WASM 邊界穿越

// ❌ 差：每個畫素一次呼叫
#[wasm_bindgen]
pub fn process_pixel(r: u8, g: u8, b: u8) -> u8 {
    (r as f32 * 0.299 + g as f32 * 0.587 + b as f32 * 0.114) as u8
}

// ✅ 好：批次處理，一次呼叫
#[wasm_bindgen]
pub fn process_image(data: &mut [u8]) {
    for pixel in data.chunks_exact_mut(4) {
        let gray = (pixel[0] as f32 * 0.299
                  + pixel[1] as f32 * 0.587
                  + pixel[2] as f32 * 0.114) as u8;
        pixel[0] = gray;
        pixel[1] = gray;
        pixel[2] = gray;
    }
}

2. 使用 wasm-bindgen 的 Vec 傳遞

// ✅ 直接返回 Vec<u8>，wasm-bindgen 自動處理記憶體
#[wasm_bindgen]
pub fn generate_hash(data: &[u8]) -> Vec<u8> {
    use sha2::{Sha256, Digest};
    let mut hasher = Sha256::new();
    hasher.update(data);
    hasher.finalize().to_vec()
}

3. 記憶體管理

// 使用 wasm-bindgen 的自動記憶體管理
#[wasm_bindgen]
pub struct Buffer {
    data: Vec<u8>,
}

#[wasm_bindgen]
impl Buffer {
    #[wasm_bindgen(constructor)]
    pub fn new(capacity: usize) -> Buffer {
        Buffer { data: Vec::with_capacity(capacity) }
    }

    pub fn as_ptr(&self) -> *const u8 {
        self.data.as_ptr()
    }

    pub fn len(&self) -> usize {
        self.data.len()
    }
}

4. 多執行緒 WASM

// 需要 SharedArrayBuffer + COOP/COEP headers
use rayon::prelude::*;

#[wasm_bindgen]
pub fn parallel_process(data: &mut [u8], width: u32) {
    let row_size = width as usize * 4;
    data.par_chunks_mut(row_size)
        .for_each(|row| {
            // 每行並行處理
            for pixel in row.chunks_exact_mut(4) {
                // 處理畫素...
            }
        });
}

---

WASM 包大小最佳化

最佳化手段	效果	代價
opt-level = "z"	體積 -30%	速度 -10%
lto = true	體積 -40%	編譯慢
strip = true	體積 -20%	無除錯資訊
wasm-opt -Oz	體積 -15%	額外步驟
Tree-shaking	體積 -50%+	需精確匯出
wasm-snip	體積 -10%	移除 panic 處理

# 最佳實踐構建流程
wasm-pack build --target web --release
wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
wasm-snip --snip-rust-panicking-code pkg/image_processor_bg.wasm

---

實戰案例：工具庫中的 WASM 應用

工具庫在以下場景使用了 WASM 加速：

ffmpeg.wasm：影片處理

import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
await ffmpeg.load();

// 影片轉碼（WASM 版 ffmpeg）
await ffmpeg.writeFile('input.mp4', videoData);
await ffmpeg.exec(['-i', 'input.mp4', '-c:v', 'libx264', 'output.mp4']);
const result = await ffmpeg.readFile('output.mp4');

oxipng：PNG 壓縮

import { oxipng } from '@jsquash/oxipng';

// PNG 無損壓縮（Rust WASM）
const compressed = await oxipng(imageData, {
  level: 4,  // 壓縮級別 0-6
  strip: 'all', // 移除所有元資料
});

---

JS vs WASM：何時選擇？

場景	推薦	原因
DOM 操作	JS	WASM 無法直接操作 DOM
簡單計算	JS	邊界穿越開銷 > 計算收益
圖像處理	WASM	畫素級操作，15x+ 加速
加密雜湊	WASM	大資料塊處理，16x+ 加速
壓縮演算法	WASM	複雜演算法，18x+ 加速
資料解析	WASM	大檔案解析，17x+ 加速
字串處理	看情況	短字串 JS 更快，長文字 WASM 更快

決策原則：如果計算時間 > 10ms 且邏輯複雜，考慮 WASM。

---

瀏覽器相容性

瀏覽器	WASM 支援	多執行緒	SIMD	例外處理
Chrome 119+	✅	✅	✅	✅
Firefox 120+	✅	✅	✅	✅
Safari 17.2+	✅	✅	✅	❌
Edge 119+	✅	✅	✅	✅

多執行緒 WASM 需要 Cross-Origin-Isolation 頭：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

---

總結

Rust + WebAssembly 讓前端開發者擁有了接近原生的計算效能。在圖像處理、加密、壓縮等計算密集型場景，WASM 帶來 15-20 倍的效能提升。但 WASM 不是銀彈——DOM 操作和簡單計算仍應使用 JS。關鍵是在正確的場景使用 WASM：當計算時間超過 10ms 且邏輯複雜時，Rust→WASM 是前端的效能核武器。