Rust 与 WebAssembly (WASM) 极速实战

Part 3：高级系统编程与生产级 Rust 实战第 4 篇。WebAssembly（Wasm）是一种二进制指令格式，旨在让开发者能够在现代 Web 浏览器、Node.js 以及 Cloudflare Workers 等 Edge 边缘计算环境中以接近原生的速度执行代码。

由于没有垃圾回收器（Garbage Collector）的运行时负担，且拥有极其成熟的工具链（wasm-bindgen 与 wasm-pack），Rust 已被公认为开发 WebAssembly 的最佳第一选择。

graph TD
    A["Rust 源代码 (.rs)"] --> B["编译为 wasm32-unknown-unknown 目标"]
    B --> C["wasm-bindgen 与 wasm-pack 构建"]
    C --> D["WebAssembly 二进制 (.wasm)"]
    C --> E["JavaScript 胶水代码与 TypeScript 类型 (.d.ts)"]
    D & E --> F["Web 浏览器 / Cloudflare Workers / Node.js"]

浅显易懂（ELI5）：给自行车加装火箭引擎#

纯 JavaScript 开发：就像一辆灵活轻便的城市单车，在平坦的市区操控 DOM 界面如鱼得水。但一旦遇到陡峭高山（音视频编码、大数据过滤、密码学计算、3D 渲染），单车就会力不从心。
Rust + WebAssembly：就像在单车车架上加装了一台微型喷气引擎。JavaScript 只需轻轻按下点火开关，密集的复杂计算由 Rust Wasm 在毫秒级内完成，UI 界面依然保持丝滑流畅！

1. 使用 `wasm-bindgen` 初始化工程#

在 Cargo.toml 中配置构建目标为 C 动态库（cdylib）：

Cargo.toml

[package]
name = "rust-wasm-demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"] # 输出适配 Wasm 的动态库

[dependencies]
wasm-bindgen = "0.2"

toml

2. 编写 JavaScript 与 Rust 双向互通代码#

#[wasm_bindgen] 宏能够自动完成参数类型的跨语言映射：

src/lib.rs

use wasm_bindgen::prelude::*;

// 1. 将 JavaScript 的 alert 函数导入 Rust
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

// 2. 将 Rust 函数导出给 JavaScript 调用
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("来自 Rust WebAssembly 的问候: {name}！"));
}

// 3. 不阻塞 UI 渲染线程的高负载密集计算
#[wasm_bindgen]
pub fn calculate_fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0;
            let mut b = 1;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

rust

3. 使用 `wasm-pack` 一键打包#

安装官方标准化打包工具：

cargo install wasm-pack
wasm-pack build --target web

bash

打包生成的 pkg/ 目录内包含：

rust_wasm_demo_bg.wasm：高度优化的二进制执行文件。
rust_wasm_demo.js：自动化加载与初始化脚本。
rust_wasm_demo.d.ts：开箱即用的完整 TypeScript 类型定义。

4. 前端网页集成实战#

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm 演示</title>
</head>
<body>
    <h1>Rust + WebAssembly 前端加速</h1>
    <button id="btn">发送问候</button>

    <script type="module">
        import init, { greet, calculate_fibonacci } from './pkg/rust_wasm_demo.js';

        async function run() {
            // 初始化加载 Wasm 模块
            await init();

            document.getElementById('btn').addEventListener('click', () => {
                greet('开发者');
                console.log('斐波那契 50 计算结果:', calculate_fibonacci(50));
            });
        }

        run();
    </script>
</body>
</html>

html

5. 生产环境 WASM 体积极限调优#

文件体积直接决定了浏览器拉取首屏的响应速度：

在 Cargo.toml 中配置尺寸优先模式：

[profile.release]
opt-level = "z" # 激进优化体积
lto = true
codegen-units = 1
panic = "abort"