Vite 中使用 WebAssembly 的核心是原生支持 WASM 导入并优化 JS/WASM 交互：可直接导入 wasm-pack 生成的 ESM 模块并调用 init() 初始化，或通过 instantiateStreaming 手动加载 public 下的 .wasm 文件；需批量传参、复用 TypedArray、启用 SIMD、分离编译与实例化，并在 React/Vue 中注意生命周期与主线程隔离。
在 Vite 中使用 WebAssembly 模块做高性能运算，核心是让 WASM 模块像普通 JavaScript 包一样被自动识别、加载和调用，同时避免常见性能陷阱。Vite 原生支持 WASM 导入（基于底层的 `@rollup/plugin-wasm`），无需额外插件，但需注意构建配置与调用方式。
直接导入 Rust/wasm-pack 生成的模块
Vite 对 wasm-pack 输出的 JS 胶水代码开箱即用。假设你用 Rust 编写了一个矩阵乘法函数，并执行了：
wasm-pack build --target web --out-dir pkg
生成的 pkg/your_module.js 就是一个标准 ESM 模块。在 Vite 项目中可直接导入：
import init, { matrix_multiply } from './pkg/your_module.js';
// 必须先调用 init() 初始化 WASM 实例（含内存分配）
await init();
// 然后调用导出函数
const result = matrix_multiply(aPtr, bPtr, cPtr, n);
注意：wasm-pack 默认启用 wasm-bindgen，会自动处理 TypedArray 内存传递，无需手动管理指针。
立即学习“Java免费学习笔记（深入）”；
用 WebAssembly.instantiateStreaming 手动加载 .wasm 文件
若你使用 C/C++ + Emscripten 或自定义 WASM 模块（只有 .wasm 文件），可在 Vite 中直接 fetch 并实例化：
// 假设 wasm 文件放在 public/wasm/math.wasm
const wasmModule = await WebAssembly.instantiateStreaming(
fetch('/wasm/math.wasm')
);
const { add, fib } = wasmModule.instance.exports;
console.log(add(10, 20)); // 30
Vite 会将 public/ 下的文件原样复制到构建输出目录，路径以 / 开头即可访问。
关键性能优化实践
单纯加载 WASM 不等于高性能——瓶颈常出现在 JS/WASM 交互层：
-
批量传参，避免高频小调用：不要在 JS 循环里反复调用 WASM 函数；改用单次传入
Float64Array，在 WASM 内部完成循环计算 -
复用 TypedArray 缓冲区：预分配足够大的
Float32Array或Uint8Array，多次运算复用同一内存视图，减少 GC 压力 -
启用 SIMD（如目标支持）：Rust 编译时加
--features wasm_simd，C/C++ 用 Emscripten 的-msimd128，并在webAssembly.compile()前检查WebAssembly.validate(bytes)兼容性 -
分离编译与实例化：在页面空闲时（如
requestIdleCallback）预编译 WASM 字节码，运行时只做instantiate，降低首调延迟
配合 React/Vue 组件安全使用
在组件中加载 WASM 需注意生命周期和并发问题：
- 使用
useState或ref缓存已初始化的 WASM 实例，避免重复init() - 避免在渲染函数中同步调用 WASM 计算——应封装为异步函数或用
useEffect触发 - 若涉及大内存操作（如图像处理），建议用
OffscreenCanvas或Web Worker隔离主线程，防止 UI 卡顿
