如何将 Rust 编译出的 WebAssembly 模块引入你的前端项目中（React + Vite ）-CSDN博客

本文链接：https://blog.csdn.net/kkkkasad/article/details/147858918

1. 什么是 Rust？

Rust 是一门由 Mozilla 主导开发的系统编程语言，目标是在保持 性能极高 的同时，提供 内存安全 和 线程安全 的保障。它最大的特点是：

内存安全：Rust 采用所有权（Ownership）机制替代了传统语言中的垃圾回收（GC），在编译期就能避免大多数内存错误（如悬垂指针、空指针解引用等）。

高性能：Rust 可以编译为本地机器码，性能接近甚至媲美 C/C++，但语法更现代，且易于维护。

并发友好：Rust 在类型系统层面约束了数据共享和修改，避免了数据竞争，使得并发代码更安全。

Rust 被广泛用于构建需要高性能、低延迟和安全保证的系统，如操作系统、区块链、游戏引擎、Web 后端服务、嵌入式系统等。

2. 什么是 WebAssembly（WASM）？

WebAssembly（简称 WASM）是一种可移植、体积小、加载快并且运行效率高的二进制指令格式，它可以在现代浏览器中运行，作为 JavaScript 的补充或替代，用于执行高性能计算任务。

WASM 的主要特点：

接近原生性能：WASM 是接近机器码的中间表示形式，适合进行密集型计算任务，如图像处理、音视频编解码、加密计算等。

多语言支持：不仅支持 C/C++，也支持 Rust、Go、AssemblyScript 等语言编译生成 WASM 模块。

与 JS 互操作：可以很方便地与 JavaScript 进行交互调用，适合在 Web 前端中做高性能模块集成。

跨平台：WASM 模块可在浏览器、Node.js、甚至 WASI 环境中运行，具有很强的跨平台能力。

2. 为什么选择 Rust + WebAssembly？

Rust 拥有完善的 WASM 编译支持（wasm32-unknown-unknown、wasm-bindgen、wasm-pack 等工具链），再加上自身卓越的性能和安全特性，是目前构建 WebAssembly 模块的首选语言之一。

在前端项目中（尤其是 React 应用），我们可以用 Rust 编写耗时、密集计算逻辑（如文本解析、图像处理、压缩加密等），将其编译为 WebAssembly 模块，并通过 JS/TS 与之交互，达到性能与体验的双赢。

通俗点说，Rust 作为一种高效且安全的语言，特别适合用来编写一些计算密集型的任务，比如文本解析、图像处理、数据加密等。这些任务如果直接用 JavaScript 编写，可能会拖慢页面的响应速度，影响用户体验。于是我们可以用 Rust 编写这些任务的代码，然后将它们编译成 WebAssembly（WASM）模块。

接着，在前端应用中（比如 React 应用），我们可以通过 JavaScript 或 TypeScript 与这些 Rust 编写的 WASM 模块进行交互。这样，我们就能够充分利用 Rust 的高性能特性，同时保持前端应用的流畅度，避免卡顿或延迟。简单来说，就是通过 Rust 的高性能来加速一些“重”任务，同时又不影响页面的响应速度和用户体验。

3. 为什么推荐用 Vite？

3.1. 默认支持 ESModule 和 .wasm 文件

Vite 原生支持导入 .wasm 文件和 wasm-pack 输出的 ESModule，不用额外配置。

import init, { add } from './pkg/rust_wasm';
await init(); // 自动加载 .wasm 文件

3.2 CRA（Create React App）或旧版 Webpack 不支持 .wasm

如果你用的是 CRA 或老旧 webpack，想引入 .wasm 你得：

自己配 file-loader
把 .wasm 弄成 Base64 或 Blob
手动 fetch 加载，再初始化

4. 安装 Visual Studio 的 C++ 编译工具

1. 为什么需要安装C++编译工具

Rust 在 Windows 默认使用的是 MSVC 工具链（也就是 Microsoft Visual C++ 编译器），而它依赖：

link.exe（链接器）
windows.h（Windows API 头文件）
Windows SDK

2. 访问 Visual Studio 官方安装器下载页：

Visual Studio 官方安装器下载地址

3. 在安装界面里：

勾选 C++ build tools（使用 C++ 的桌面开发）

5. 安装Rust 和 wasm-pack

5.1 Rust安装

可以参考Rust安装(windows)

安装完成后

rustc --version
cargo --version

如果成功显示版本号，那 Rust 环境就已经配置好

安装成功后将cargo 添加到环境变量中。

您可以通过以下命令手动将路径添加到环境变量（针对 Linux/macOS）：

export PATH="$HOME/.cargo/bin:$PATH"

或者，在 Windows 上，您需要手动添加 C:\Users<YourUsername>.cargo\bin 到系统的环境变量 PATH 中。

5.2 wasm-pack安装

cargo install wasm-pack

如果这条命令成功运行，wasm-pack 会被安装到默认路径（通常是 ~/.cargo/bin 目录）。

如果安装成功，你应该看到如下输出：

 Installing wasm-pack v0.11.0
   Compiling ...
    Finished ...

安装完后，可以验证一下 wasm-pack 是否能正常运行：

wasm-pack --version

6. 安装好之后怎么用 wasm-pack

6.1 创建 Rust 库项目

cd your-react-project
cargo new rust-wasm --li

6.2 修改 Cargo.toml 文件，加入以下配置

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

[dependencies]
wasm-bindgen = "0.2"

大概解释一下Carg.toml里的几个代表什么意思

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

[dependencies]
wasm-bindgen = "0.2"

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

Cargo.toml 是 Rust 项目的配置文件。

[package] 部分定义了项目的基本信息，如名称、版本和 Rust edition。

[lib] 部分设置了编译类型，指定生成一个 cdylib 格式的库（这是 WebAssembly 所需要的）。

[dependencies] 部分列出了项目的依赖项，这里你引入了 wasm-bindgen 这个库，以便与 JavaScript 进行交互。

这个配置文件帮助 Rust 知道如何编译你的代码，以及如何与 JavaScript 进行交互（通过 WebAssembly）。

6.3 编辑 rust-wasm/src/lib.rs（写一个简单函数）：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: f64, right: f64) -> f64 {
    let sum = left + right;
    sum as f64 // 转换为 f64 类型，适配 JavaScript 的 number
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn it_works() {
        let result = add(2, 2);
        assert_eq!(result, 4.0);
    }
}

6.4 编译成 WebAssembly 模块

在 my-react-app/rust-wasm/ 中运行：

wasm-pack build --target web --out-dir ../src/wasm

或者

wasm-pack build --target web --out-dir ../src/wasm --no-default-features

它会生成 src/wasm/，里面有 .wasm 文件和 JS glue 代码。

6.5 在 React 中引入并调用

修改 vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.wasm'], // 加上这行
})

6.6 修改 src/App.tsx：

import React, { useEffect, useState } from 'react'
import init, { add } from './wasm/rust_wasm'

function App() {
  const [sum, setSum] = useState<number | null>(null)

  useEffect(() => {
    init().then(() => {
      const result = add(123, 456)
      setSum(result)
    })
  }, [])

  return (
    <div style={{ padding: 20 }}>
      <h1>Rust + WASM 示例</h1>
      <p>123 + 456 = {sum}</p>
    </div>
  )
}

export default App