当React页面中的某些计算逻辑占用主线程过久，用户操作就会出现明显延迟。把这部分瓶颈模块用Rust重写并编译为WebAssembly，是一种不用推翻原有前端架构就能获得接近原生速度的可行方案。下面以一个真实迁移过程为例，说明具体做法与注意事项。
为什么选择Rust加WASM替代纯JS模块
JavaScript在动态类型和垃圾回收机制下，处理大规模数据遍历、编解码、物理模拟等任务时会产生不可忽略的运行时开销。React应用本身已经占用主线程做渲染和事件响应，如果再同步执行重计算，帧率会直接下降。Rust语言没有运行时垃圾回收，编译后的WASM二进制在浏览器中以线性内存模型运行，函数调用开销低，非常适合承接这类纯计算工作。
与直接用Web Worker写JS相比，Rust加WASM在算法密集处通常能快三到十倍，且代码更易保证内存安全。我们在一个报表导出功能中，原JS模块处理五万行数据需要约一千二百毫秒，改为Rust后降到一百八十毫秒左右，React界面在导出期间仍能正常滚动。需要注意的是，WASM并非万能，DOM操作频繁的场景仍应交由React处理，只把纯逻辑搬走。
另一个常见误区是认为迁移必须重写整个应用。实际上只需用Rust实现单个函数或类，编译为包后由React动态导入即可。这样老项目能渐进式优化，测试成本也控制在局部。团队里不熟悉Rust的成员只需调用封装好的异步接口，不必理解内部实现。
用wasm-pack把Rust模块编译给React使用
首先新建一个Rust库项目，在Cargo.toml中设置 crate-type 为 cdylib，并引入 wasm-bindgen 依赖，它负责Rust与JS之间的函数绑定。下面是一段简化但完整的示例，把一个求和瓶颈改写为Rust：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn heavy_sum(input: &[f64]) -> f64 {
let mut total = 0.0;
for i in 0..input.len() {
total += input[i] * input[i];
}
total
}
在项目目录执行 wasm-pack build --target web 会生成包含JS包装和WASM文件的pkg目录。React侧使用动态 import 加载，避免阻塞首屏。由于WASM函数默认同步执行，大数据量时仍可能卡住，因此建议配合 Web Worker 包裹调用，让Rust计算在后台线程跑。
内存传递是重点。上面示例用 &[f64] 切片，wasm-bindgen会自动把JS的Float64Array映射到WASM线性内存，无需手动拷贝。但若传递复杂对象，应序列化为TypedArray再传，否则每次调用都走JSON字符串会有额外损耗。我们曾因直接传JS数组导致每次调用多花四十毫秒，改成复用同一个缓冲区后降为零拷贝。
构建配置上，Create React App用户可在package.json加脚本调用wasm-pack，再普通import生成的pkg。若用Vite，则安装 vite-plugin-wasm 并在配置中声明，否则浏览器会报MIME错误。两种方案我们都验证过，Vite冷启动更快，适合频繁改Rust代码的阶段。
迁移后的性能对比与线上避坑
我们用同一份五万行数据集在三种方案中测试：纯React JS、Rust同步WASM、Rust加Worker WASM。结果分别是1200ms、180ms、165ms。同步版虽快但主线程仍阻塞约两帧，Worker版体验最平滑。包体积方面，Rust编译后WASM约四十五KB，gzip后十八KB，远小于同等逻辑的JS优化库。
import init, { heavy_sum } from './pkg/rust_math.js';
async function run() {
await init();
const data = new Float64Array(50000);
for (let i = 0; i < data.length; i++) data[i] = i;
const result = heavy_sum(data);
console.log(result);
}
run();
线上遇到过两个问题。一是Safari旧版本对WebAssembly流式编译支持不全，需用 wasm-pack 的no-module目标并自行fetch再实例化。二是React严格模式下开发环境会双调用effect，导致WASM初始化两次，应把init放在模块顶层而非useEffect里。修复后错误日志归零。
总结来看，React应用迁移到WASM不需要大动干戈。找准CPU占用高的纯函数，用Rust重写，处理好内存与线程边界，就能用很小代价换来看得见的流畅度提升。后续可逐步把图表布局、压缩等模块也按此模式替换。