如何从Uint8Array动态导入WebAssembly？

你可以通过以下两种方式实现类似JavaScript动态导入的逻辑，加载Uint8Array格式的编译后WebAssembly代码：

方法一：使用Data URL（适合小体积Wasm） #

先将Uint8Array转换为Base64字符串，再构造符合标准的WebAssembly Data URL（MIME类型为application/wasm），最后通过import()动态加载：

// 示例Uint8Array格式的Wasm字节数据
const wasmBytes = new Uint8Array([/* 替换为你的编译后Wasm字节 */]);

// 把Uint8Array转成Base64字符串
function uint8ToBase64(arr) {
  return btoa(String.fromCharCode(...arr));
}

// 动态导入Wasm模块
async function loadWasm() {
  const base64Code = uint8ToBase64(wasmBytes);
  const wasmModule = await import(`data:application/wasm;base64,${base64Code}`);
  // 调用模块导出的方法，比如 wasmModule.calculate(100)
}

loadWasm();

方法二：使用Blob URL（适合大体积Wasm） #

如果Wasm体积较大，Base64编码会额外增加约33%的体积，此时更推荐Blob URL方案，性能和内存表现更优：

// 示例Uint8Array格式的Wasm字节数据
const wasmBytes = new Uint8Array([/* 替换为你的编译后Wasm字节 */]);

// 动态导入Wasm模块
async function loadWasm() {
  const wasmBlob = new Blob([wasmBytes], { type: 'application/wasm' });
  const wasmUrl = URL.createObjectURL(wasmBlob);
  
  const wasmModule = await import(wasmUrl);
  // 调用模块导出的方法
  
  // 使用完毕后释放Blob URL，避免内存泄漏
  URL.revokeObjectURL(wasmUrl);
}

loadWasm();

关键说明 #

• WebAssembly的标准MIME类型是application/wasm，而非你预期的binary/webassembly，使用正确类型才能被浏览器正确解析。
• 若Uint8Array数据量极大，String.fromCharCode(...arr)可能触发参数长度限制，直接用Blob方案即可规避这个问题。

内容的提问来源于stack exchange，提问作者Lucien