# 【Rust系统编程与WebAssembly】生态工具指南：从工程化到前端集成

文章目录

• 1. 核心基础：Cargo 工作区配置（多项目工程化管理）
  • 1.1 工作区核心概念与适用场景
  • 1.2 工作区创建与目录结构
    • 步骤 1：创建工作区目录与配置文件
    • 步骤 2：创建子包
    • 步骤 3：最终目录结构
  • 1.3 依赖共享与版本管理
    • 1. 引用工作区共享依赖
    • 2. 子包间依赖传递
  • 1.4 多目标编译配置
  • 1.5 工作区常用指令
• 2. 性能优化：Rust 程序性能剖析（perf 实战）
  • 2.1 perf 工具简介与环境准备
    • 1. perf 工具功能
    • 2. 环境安装（Linux 系统）
  • 2.2 Rust 程序编译配置（调试信息与优化）
  • 2.3 perf 核心指令实操（record/report/stat）
    • 1. perf stat：实时性能统计
    • 2. perf record：采样与数据采集
    • 3. perf report：分析采样数据
  • 2.4 性能瓶颈定位与优化案例
    • 示例：优化高频调用的字符串处理函数
  • 2.5 火焰图生成与分析
• 3. 系统交互：Rust FFI 调用 C 库全流程
  • 3.1 FFI 核心概念与安全注意事项
    • 核心概念
    • 安全注意事项
  • 3.2 C 库准备与接口声明
    • 步骤 1：编写简单 C 库
    • 步骤 2：编译 C 库为静态库/动态库
  • 3.3 Rust 绑定生成（bindgen 工具）
    • 步骤 1：安装 bindgen 与依赖
    • 步骤 2：生成 Rust 绑定代码
    • 步骤 3：配置 Cargo.toml
    • 步骤 4：生成并引用绑定
  • 3.4 手动声明 C 接口与调用
  • 3.5 编译链接与常见问题解决
    • 1. 链接 C 库（静态库/动态库）
    • 2. 常见问题解决
• 4. 跨端融合：Rust 编译 WASM 与前端集成
  • 4.1 WASM 工具链安装（wasm-pack/cargo-web）
  • 4.2 Rust 程序适配 WASM 开发规范
  • 4.3 WASM 编译配置与产物解析
    • 步骤 1：创建 Rust WASM 项目
    • 步骤 2：配置 Cargo.toml
    • 步骤 3：编写 Rust WASM 代码
    • 步骤 4：编译为 WASM 产物
    • 步骤 5：产物解析
  • 4.4 前端集成实战（原生 JS/Vue 示例）
    • 示例 1：原生 JavaScript 集成
    • 示例 2：Vue 3 集成
  • 4.5 WASM 性能优化与体积压缩
    • 1. 体积压缩
    • 2. 性能优化

1. 核心基础：Cargo 工作区配置（多项目工程化管理）

Cargo 是 Rust 官方的构建工具与包管理器，而 Cargo 工作区（Workspace）则是用于管理多个 Rust 包（crate）的核心功能，适用于大型项目拆分、多模块协作开发场景。通过工作区可以统一管理依赖版本、共享构建配置，大幅提升工程化效率。

1.1 工作区核心概念与适用场景

• 工作区（Workspace）：包含多个子包（member）的顶层项目，所有子包共享同一个 Cargo.lock 和依赖缓存，确保依赖版本一致。
• 子包（Member）：工作区内的独立 Rust 项目，可分为二进制包（bin）和库包（lib），库包可被其他子包依赖。
• 适用场景：大型 Rust 项目拆分（如核心库、工具包、应用程序分离）、多模块协作开发、同一项目适配多平台（桌面/wasm/嵌入式）。

1.2 工作区创建与目录结构

步骤 1：创建工作区目录与配置文件

新建工作区根目录，创建顶层 Cargo.toml（工作区配置文件），无需 src 目录（工作区本身不编译代码，仅管理子包）。

 // 顶层 Cargo.toml（工作区配置） [workspace] # 子包列表（指定子包目录） members = [ "core-lib", # 核心库包（被其他包依赖） "utils", # 工具库包 "app-cli", # 命令行二进制包 "app-wasm" # WASM 二进制包 ] # 可选：指定工作区默认依赖版本（子包可继承） [workspace.package] version = "0.1.0" edition = "2021" authors = ["Your Name <[email protected]>"] license = "MIT" # 可选：依赖版本统一管理（子包可通过 {workspace} 引用） [workspace.dependencies] tokio = { version = "1.0", features = ["full"] } serde = { version = "1.0", features = ["derive"] } anyhow = "1.0" 

步骤 2：创建子包

在工作区根目录执行以下命令创建子包，Cargo 会自动将子包添加到工作区配置中：

# 创建库包（core-lib） cargo new core-lib --lib # 创建二进制包（app-cli） cargo new app-cli --bin # 创建 WASM 包（app-wasm） cargo new app-wasm --bin 

步骤 3：最终目录结构

 rust-workspace/ # 工作区根目录 ├── Cargo.toml # 工作区配置文件 ├── Cargo.lock # 统一依赖锁文件（自动生成） ├── core-lib/ # 核心库包 │ ├── Cargo.toml │ └── src/ │ └── lib.rs ├── utils/ # 工具库包 │ ├── Cargo.toml │ └── src/ │ └── lib.rs ├── app-cli/ # 命令行二进制包 │ ├── Cargo.toml │ └── src/ │ └── main.rs └── app-wasm/ # WASM 二进制包 ├── Cargo.toml └── src/ └── main.rs 

1.3 依赖共享与版本管理

工作区的核心优势之一是依赖版本统一，避免子包间依赖冲突。子包可通过以下方式引用工作区共享依赖或其他子包：

1. 引用工作区共享依赖

子包 Cargo.toml 中通过 {workspace} 引用顶层配置的依赖版本，无需重复指定版本号：

 // app-cli/Cargo.toml [package] name = "app-cli" version.workspace = true # 继承工作区版本 edition.workspace = true # 继承工作区 Rust 版本 [dependencies] # 引用工作区共享依赖（版本继承顶层配置） tokio.workspace = true serde.workspace = true anyhow.workspace = true # 引用工作区内的库包（core-lib） core-lib = { path = "../core-lib" } utils = { path = "../utils" } 

2. 子包间依赖传递

若 A 包依赖 B 包，B 包依赖 C 包，则 A 包可间接使用 C 包的公开接口（需 B 包在 Cargo.toml 中通过 pub 导出 C 包）：

 // core-lib/Cargo.toml [dependencies] # 公开导出 utils 包，供依赖 core-lib 的子包使用 utils = { path = "../utils", public = true } 

1.4 多目标编译配置

通过工作区可实现同一项目适配多平台目标（如 x86_64-linux、wasm32-unknown-unknown），只需在子包中配置 targets：

 // app-wasm/Cargo.toml [package] name = "app-wasm" version.workspace = true edition.workspace = true [lib] crate-type = ["cdylib"] # WASM 动态库类型（必须配置） [dependencies] core-lib = { path = "../core-lib" } wasm-bindgen = "0.2" # WASM 与 JS 交互核心库 web-sys = { version = "0.3", features = ["console"] } # 浏览器 API 绑定 

1.5 工作区常用指令

在工作区根目录执行以下指令，可批量操作所有子包：

# 构建所有子包 cargo build # 构建指定子包（app-cli） cargo build -p app-cli # 运行指定子包（app-cli） cargo run -p app-cli # 测试所有子包 cargo test# 测试指定子包（core-lib） cargo test -p core-lib # 检查所有子包代码规范 cargo clippy # 更新所有子包依赖 cargo update # 清理构建产物 cargo clean 

2. 性能优化：Rust 程序性能剖析（perf 实战）

perf 是 Linux 系统下的性能剖析工具，可用于分析 Rust 程序的 CPU 使用率、函数调用耗时、指令执行次数等，是定位性能瓶颈的核心工具。Rust 编译后的程序支持 perf 剖析，但需配置正确的编译参数以保留调试信息。

2.1 perf 工具简介与环境准备

1. perf 工具功能

• 采样分析：记录程序运行时的 CPU 事件（如指令执行、缓存命中/缺失、函数调用）。
• 报告生成：分析采样数据，生成函数耗时排行、调用关系图。
• 实时统计：实时显示程序的 CPU 使用率、事件计数等指标。

2. 环境安装（Linux 系统）

# Ubuntu/Debiansudoaptinstall linux-tools-common linux-tools-$(uname -r)# CentOS/RHELsudo yum install perf # 验证安装 perf --version 

2.2 Rust 程序编译配置（调试信息与优化）

perf 需依赖程序的调试信息（如函数名、行号）才能生成可读报告，同时需保留一定的优化等级以接近生产环境性能。在 Cargo.toml 中配置如下：

 // Cargo.toml（子包配置） [profile.release] debug = true # 保留调试信息（perf 需此配置） opt-level = 3 # 最高优化等级（接近生产环境） lto = true # 链接时优化（提升性能，减少体积） codegen-units = 1 # 单代码生成单元（优化更充分，编译变慢） 

说明：debug = true 会保留调试信息，但不会影响优化效果；opt-level = 3 是 Rust 最高优化等级，确保剖析结果接近生产环境。

2.3 perf 核心指令实操（record/report/stat）

1. perf stat：实时性能统计

快速查看程序的 CPU 使用率、指令执行次数、缓存命中率等核心指标：

# 运行程序并统计性能指标 perf stat cargo run -p app-cli -- <程序参数># 输出示例（关键指标） Performance counter stats for'cargo run -p app-cli':123.456789 task-clock (msec)# 0.987 CPUs utilized 123 context-switches # 0.001 M/sec 12 cpu-migrations # 0.000 M/sec 4567 page-faults # 0.037 M/sec 345,678,901,234 cycles # 2.799 GHz 123,456,789,012 instructions # 0.36 insn per cycle 23,456,789,012 branches # 190.000 M/sec 1,234,567,890 branch-misses # 5.29% of all branches 0.124567890 seconds time elapsed 

关键指标解读：

• cycles：CPU 周期数，数值越大表示程序占用 CPU 资源越多。
• instructions：指令执行次数，insn per cycle 越接近 1 表示 CPU 利用率越高。
• branch-misses：分支预测失败率，过高会导致 CPU 流水线停顿，需优化条件判断。

2. perf record：采样与数据采集

记录程序运行时的性能数据，生成采样文件（perf.data）：

# 基础采样（记录 CPU 事件） perf record -g cargo run -p app-cli -- <程序参数># 选项说明：# -g：记录函数调用栈（关键，用于生成调用关系图）# -F 1000：采样频率为 1000 Hz（默认 4000 Hz，降低频率减少开销）# -o perf.data：指定输出文件

3. perf report：分析采样数据

读取 perf.data 文件，生成可视化报告，定位耗时函数：

# 生成交互式报告 perf report # 选项说明：# --sort comm,dso,sym：按进程、共享库、函数排序# --stdio：输出文本格式报告（便于保存）

报告解读：

• 按百分比排序，百分比越高的函数耗时越长，是优化重点。
• 按 Enter 可查看函数调用栈，定位调用路径。

2.4 性能瓶颈定位与优化案例

示例：优化高频调用的字符串处理函数

假设 perf report 显示 utils::string::format_data 函数耗时占比 30%，代码如下：

// 优化前：频繁创建 String，内存分配开销大pubfnformat_data(id:u32, name:&str)->String{letmut result =String::new(); result.push_str(&format!("id: {}", id)); result.push_str(&format!("; name: {}", name)); result }

优化方案：使用 std::fmt::Write 减少内存分配，避免频繁创建 String：

// 优化后：预分配内存，减少分配次数usestd::fmt::Write;pubfnformat_data(id:u32, name:&str)->String{letmut result =String::with_capacity(32);// 预分配足够的内存write!(&mut result,"id: {}; name: {}", id, name).unwrap(); result }

优化效果：通过 perf 验证，该函数耗时占比降至 5% 以下，程序整体执行时间缩短 25%。

2.5 火焰图生成与分析

火焰图（Flame Graph）是更直观的性能分析工具，可清晰展示函数调用栈与耗时占比。需借助 flamegraph 工具生成：

# 安装 flamegraph（依赖 perf） cargo install flamegraph # 生成火焰图（针对指定子包） flamegraph -o app-cli-flame.svg cargo run -p app-cli -- <程序参数>

火焰图解读：

• 横向：函数耗时占比（越宽耗时越长）。
• 纵向：函数调用栈（上层是调用者，下层是被调用者）。
• 颜色：无特殊含义，仅用于区分函数。

通过火焰图可快速定位“平顶”函数（耗时占比极高的函数），优先优化此类函数。

3. 系统交互：Rust FFI 调用 C 库全流程

FFI（Foreign Function Interface，外部函数接口）是 Rust 与其他语言（如 C/C++）交互的核心机制。Rust 支持调用 C 库函数，也可被 C 语言调用，适用于复用现有 C 库、与系统底层交互等场景。但 FFI 调用涉及 unsafe 代码，需严格遵守内存安全规范。

3.1 FFI 核心概念与安全注意事项

核心概念

• extern “C”：声明遵循 C 调用约定的函数接口，确保 Rust 与 C 语言的函数调用方式一致。
• unsafe 块：FFI 调用属于不安全操作（无法保证 C 函数的内存安全性），必须包裹在 unsafe 块中。
• 类型匹配：Rust 类型与 C 类型需严格匹配（如 Rust 的 u32 对应 C 的 uint32_t），避免类型溢出。

安全注意事项

• 内存管理：C 库分配的内存需由 C 库释放，Rust 分配的内存不可由 C 库释放，避免双重释放。
• 空指针处理：C 函数可能返回空指针（NULL），Rust 需显式判断，避免空指针解引用。
• 线程安全：若 C 库不是线程安全的，需在 Rust 中通过互斥锁（Mutex）保证单线程调用。

3.2 C 库准备与接口声明

步骤 1：编写简单 C 库

创建 math_lib.c 和 math_lib.h 文件，实现基础的数学运算函数：

// math_lib.h（C 库头文件）#ifndefMATH_LIB_H#defineMATH_LIB_H#include<stdint.h>// 加法函数uint32_tadd(uint32_t a,uint32_t b);// 乘法函数uint32_tmultiply(uint32_t a,uint32_t b);// 字符串拼接（返回 C 风格字符串，需手动释放内存）char*concat_str(constchar* a,constchar* b);// 释放 concat_str 分配的内存voidfree_str(char* str);#endif

// math_lib.c（C 库实现）#include"math_lib.h"#include<stdlib.h>#include<string.h>uint32_tadd(uint32_t a,uint32_t b){return a + b;}uint32_tmultiply(uint32_t a,uint32_t b){return a * b;}char*concat_str(constchar* a,constchar* b){size_t len_a =strlen(a);size_t len_b =strlen(b);char* result =(char*)malloc(len_a + len_b +1);if(result ==NULL)returnNULL;strcpy(result, a);strcat(result, b);return result;}voidfree_str(char* str){free(str);}

步骤 2：编译 C 库为静态库/动态库

# 编译为静态库（.a 文件） gcc -c math_lib.c -o math_lib.o ar rcs libmath_lib.a math_lib.o # 编译为动态库（.so 文件，Linux） gcc -shared -fPIC math_lib.c -o libmath_lib.so 

3.3 Rust 绑定生成（bindgen 工具）

手动声明 C 接口易出错，可使用 bindgen 工具自动生成 Rust 绑定代码。bindgen 会解析 C 头文件，生成对应的 Rust 函数声明和类型定义。

步骤 1：安装 bindgen 与依赖

# 安装 bindgen cargo install bindgen # 安装依赖（Ubuntu/Debian）sudoaptinstall clang libclang-dev 

步骤 2：生成 Rust 绑定代码

创建 build.rs（构建脚本），配置 bindgen 生成绑定：

// build.rsfnmain(){// 生成 Rust 绑定let bindings =bindgen::Builder::default().header("math_lib.h")// 指定 C 头文件.generate()// 生成绑定代码.expect("无法生成绑定代码");// 将绑定代码写入 src/bindings.rslet out_path =std::path::PathBuf::from(std::env::var("OUT_DIR").unwrap()); bindings .write_to_file(out_path.join("bindings.rs")).expect("无法写入绑定文件");}

步骤 3：配置 Cargo.toml

 // Cargo.toml [package] name = "rust-ffi-demo" version = "0.1.0" edition = "2021" // 构建脚本依赖 [build-dependencies] bindgen = "0.69.0" // 链接 C 库（静态库/动态库） [dependencies] libc = "0.2" # C 类型定义库 [profile.release] lto = true 

步骤 4：生成并引用绑定

执行 cargo build 后，bindgen 会在 target/debug/build/rust-ffi-demo-xxx/out/ 目录下生成 bindings.rs，在 Rust 代码中引用：

// src/main.rs// 引入生成的绑定代码include!(concat!(env!("OUT_DIR"),"/bindings.rs"));fnmain(){// 调用 C 库函数（必须在 unsafe 块中）unsafe{// 调用加法函数let sum =add(10,20);println!("10 + 20 = {}", sum);// 调用乘法函数let product =multiply(10,20);println!("10 * 20 = {}", product);// 调用字符串拼接函数let a =b"Hello ".as_ptr()as*consti8;let b =b"World!".as_ptr()as*consti8;let c_str =concat_str(a, b);// 检查是否为空指针if!c_str.is_null(){let rust_str =std::ffi::CStr::from_ptr(c_str).to_str().unwrap_or("无效字符串");println!("拼接结果：{}", rust_str);// 调用 C 库函数释放内存free_str(c_str);}}}

3.4 手动声明 C 接口与调用

若 C 库接口简单，也可手动声明 C 函数接口，无需使用 bindgen：

// src/main.rsusestd::ffi::{CStr,CString};usestd::os::raw::c_char;// 手动声明 C 库函数接口（遵循 C 调用约定）extern"C"{fnadd(a:u32, b:u32)->u32;fnmultiply(a:u32, b:u32)->u32;fnconcat_str(a:*const c_char, b:*const c_char)->*mut c_char;fnfree_str(str:*mut c_char);}fnmain(){unsafe{// 调用加法函数println!("10 + 20 = {}",add(10,20));// 调用字符串拼接函数（Rust 字符串转 C 字符串）let a =CString::new("Hello ").unwrap();let b =CString::new("Rust!").unwrap();let c_str =concat_str(a.as_ptr(), b.as_ptr());if!c_str.is_null(){let rust_str =CStr::from_ptr(c_str).to_str().unwrap();println!("拼接结果：{}", rust_str);free_str(c_str);}}}

3.5 编译链接与常见问题解决

1. 链接 C 库（静态库/动态库）

编译 Rust 程序时，需指定 C 库的路径和名称，确保编译器能找到并链接 C 库：

# 链接静态库（指定库路径和库名） rustc src/main.rs -L ./ -l math_lib -o rust-ffi-demo # 链接动态库（Linux 需指定库路径） rustc src/main.rs -L ./ -l math_lib -o rust-ffi-demo exportLD_LIBRARY_PATH=./:$LD_LIBRARY_PATH# 告知系统动态库路径# 使用 cargo 编译（在 Cargo.toml 中配置）[package]# ... 其他配置[build-dependencies] cc ="1.0"# 用于编译 C 代码 // 修改 build.rs，自动编译 C 库 fn main(){ // 编译 C 库 cc::Build::new() .file("math_lib.c") .compile("libmath_lib.a"); // 编译为静态库 // 生成绑定（可选） // ... }

2. 常见问题解决

• 问题 1：“undefined reference to `add’” （链接错误）

解决：确保指定了正确的库路径（-L）和库名（-l），库文件存在且编译成功。

• 问题 2：“invalid conversion from *const u8 to *const i8” （类型不匹配）

解决：Rust 的 &[u8] 需显式转换为 C 语言的 *const c_char，使用 CString 或 as_ptr() 转换。

• 问题 3：内存泄漏/双重释放

解决：严格遵循“谁分配谁释放”原则，C 库分配的内存必须调用 C 库的释放函数，Rust 分配的内存不可由 C 库释放。

4. 跨端融合：Rust 编译 WASM 与前端集成

WebAssembly（WASM）是一种二进制指令格式，可在浏览器中高效运行，Rust 是编译为 WASM 的最佳语言之一（内存安全、高性能、无垃圾回收）。通过 Rust 编译 WASM，可将 Rust 程序的高性能优势带到前端，适用于复杂计算、游戏引擎、音视频处理等场景。

4.1 WASM 工具链安装（wasm-pack/cargo-web）

Rust 编译 WASM 需安装专用工具链，主流工具为 wasm-pack（官方推荐）和 cargo-web：

# 安装 Rust 与 WASM 目标平台curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs |sh rustup target add wasm32-unknown-unknown # 添加 WASM 目标平台# 安装 wasm-pack（官方工具，用于构建、打包 WASM） cargo install wasm-pack # 安装 cargo-web（可选，支持更简单的前端集成） cargo install cargo-web 

wasm-pack 功能：编译 Rust 为 WASM、生成 JavaScript 绑定、打包为 npm 包，便于前端集成；cargo-web 适合快速开发，支持自动生成前端页面。

4.2 Rust 程序适配 WASM 开发规范

Rust 程序编译为 WASM 需遵循一定规范，核心是通过 wasm-bindgen 库实现 Rust 与 JavaScript 的交互：

• 依赖 wasm-bindgen：用于生成 Rust 与 JS 的交互绑定。
• 标注 #[wasm_bindgen]：标记需要暴露给 JS 的函数、结构体、枚举。
• 避免使用 WASM 不支持的 API：如文件系统、线程（需开启 WASM 线程支持）。

4.3 WASM 编译配置与产物解析

步骤 1：创建 Rust WASM 项目

# 创建 Rust 库项目（WASM 优先使用库包） cargo new rust-wasm-demo --lib cd rust-wasm-demo 

步骤 2：配置 Cargo.toml

 // Cargo.toml [package] name = "rust-wasm-demo" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] # 编译为 WASM 动态库（必须配置） [dependencies] wasm-bindgen = "0.2" # Rust 与 JS 交互核心库 web-sys = { version = "0.3", features = ["console", "Window"] } # 浏览器 API 绑定 js-sys = "0.3" # JS 类型与函数绑定 

步骤 3：编写 Rust WASM 代码

// src/lib.rsusewasm_bindgen::prelude::*;useweb_sys::console;// 暴露给 JavaScript 的函数（标注 #[wasm_bindgen]）#[wasm_bindgen]pubfnadd(a:i32, b:i32)->i32{ a + b }// 暴露给 JS 的结构体#[wasm_bindgen]pubstructCalculator{ factor:i32,}#[wasm_bindgen]implCalculator{// 构造函数（JS 中通过 new Calculator(factor) 调用）pubfnnew(factor:i32)->Self{Calculator{ factor }}// 结构体方法pubfnmultiply(&self, num:i32)->i32{ num *self.factor }// 调用 JS 的 console.logpubfnlog(&self, message:&str){console::log_1(&JsValue::from_str(message));}}// 初始化函数（JS 加载 WASM 后自动调用）#[wasm_bindgen(start)]pubfnrun(){console::log_1(&JsValue::from_str("Rust WASM 加载成功！"));}

步骤 4：编译为 WASM 产物

# 使用 wasm-pack 编译（生成 npm 包，适合前端集成） wasm-pack build --target web --out-name wasm_demo --out-dir ./static # 选项说明：# --target web：生成适用于浏览器的产物（无 CommonJS 依赖）# --out-name：指定 WASM 文件名# --out-dir：指定输出目录

步骤 5：产物解析

编译后会在 static 目录生成 3 个文件：

• wasm_demo.wasm：WASM 二进制文件（核心产物）。
• wasm_demo.js：自动生成的 JS 绑定文件（封装 WASM 调用逻辑）。
• wasm_demo.d.ts：TypeScript 类型声明文件（便于 TS 项目集成）。

4.4 前端集成实战（原生 JS/Vue 示例）

示例 1：原生 JavaScript 集成

创建 index.html，引入编译后的 WASM 产物：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Rust WASM 原生 JS 集成</title></head><body><h1>Rust WASM 计算器</h1><p>10 + 20 = <spanid="sum"></span></p><p>5 * 3 = <spanid="product"></span></p><scripttype="module">// 引入 WASM 绑定文件import init,{ add, Calculator }from'./static/wasm_demo.js';// 加载 WASM 并调用asyncfunctionrun(){// 初始化 WASM（必须先调用 init）awaitinit();// 调用 Rust 函数 addconst sum =add(10,20); document.getElementById('sum').textContent = sum;// 实例化 Rust 结构体 Calculatorconst calc =newCalculator(3);const product = calc.multiply(5); document.getElementById('product').textContent = product;// 调用 Rust 方法 log calc.log('计算器初始化成功！');}run();</script></body></html>

示例 2：Vue 3 集成

1. 复制 WASM 产物到 Vue 项目的 public/static 目录。
2. 在 Vue 组件中引入并调用：

 <template> <div> <h2>Rust WASM Vue 集成示例</h2> <div> <input v-model.number="a" type="number" placeholder="输入数字1" /> <input v-model.number="b" type="number" placeholder="输入数字2" /> <button @click="calculateSum">计算和</button> <p>和：{{ sum }}</p> </div> <div> <input v-model.number="factor" type="number" placeholder="输入倍数" /> <input v-model.number="num" type="number" placeholder="输入数字" /> <button @click="calculateProduct">计算倍数</button> <p>结果：{{ product }}</p> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const a = ref(0); const b = ref(0); const sum = ref(0); const factor = ref(1); const num = ref(0); const product = ref(0); let Calculator = null; // 加载 WASM onMounted(async () => { // 引入 WASM 绑定文件 const { init, Calculator: RustCalculator } = await import('/static/wasm_demo.js'); await init(); Calculator = RustCalculator; }); // 调用 Rust add 函数 const calculateSum = () => { sum.value = window.add(a.value, b.value); }; // 调用 Rust Calculator 结构体 const calculateProduct = () => { if (!Calculator) return; const calc = new Calculator(factor.value); product.value = calc.multiply(num.value); calc.log(`计算结果：${product.value}`); }; </script> 

4.5 WASM 性能优化与体积压缩

WASM 产物的体积和性能直接影响前端体验，需进行针对性优化：

1. 体积压缩

# 1. 使用 wasm-opt 压缩 WASM 体积（需安装 Binaryen）sudoaptinstall binaryen wasm-opt -O3 ./static/wasm_demo.wasm -o ./static/wasm_demo_opt.wasm # 2. 编译时开启 LTO 优化（Cargo.toml 配置）[profile.release] lto =true opt-level =3 strip =true# 移除调试信息# 3. 排除不必要的依赖（使用 --no-default-features）[dependencies] web-sys ={ version ="0.3", features =["console"], default-features =false}

2. 性能优化

• 减少 Rust 与 JS 的交互次数：频繁交互会产生性能开销，尽量在 Rust 中完成复杂计算，一次性返回结果。
• 使用 WebAssembly 2.0 特性：开启 SIMD 指令（单指令多数据），提升并行计算性能：

 // Cargo.toml [package] # ... [lib] crate-type = ["cdylib"] [dependencies] # ... [profile.release] lto = true opt-level = 3 rustflags = ["-C", "target-fe