Web Worker中无法加载WASM求和函数问题求助

问题说明 #

• 实现的两数求和WASM函数在主脚本中运行正常，但迁移至Web Worker后无执行反馈，无错误日志可调试
• Vite环境下仅输出以下日志：

[vite] connecting... client.ts:19:8
Message posted to worker with numbers 1 and 2. main.ts:13:10
[vite] connected. client.ts:175:14

• 经测试确认Vite环境下是时序问题：在主脚本中设置断点后，可得到预期输出：

Message posted to worker with numbers 1 and 2.
worker.ts:4 Worker is calculating with data... {number1: 1, number2: 2}
main.ts:20 Message received, sum is: 3

• Webpack环境下问题仍存在，需找到无需依赖断点的通用解决方法

核心原因 #

1. WASM初始化时序不匹配：Web Worker在接收主线程postMessage请求时，WASM模块可能还未完成加载或初始化，导致调用未就绪的函数后无响应
2. 构建工具处理差异：Vite的热更新机制和Webpack的打包策略对Web Worker、WASM模块的加载逻辑有区别，进一步放大了时序问题

解决方案 #

1. 让Worker等待WASM初始化完成后再处理消息 #

修改Worker代码，先完成WASM模块的加载初始化，再注册消息监听：

// worker.ts
let wasmInstance: any;

// 先初始化WASM
async function initWasm() {
  // 根据实际WASM导入方式调整，比如用WebAssembly.instantiateStreaming
  const response = await fetch(new URL('./sum.wasm', import.meta.url));
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes);
  wasmInstance = instance.exports;

  // 初始化完成后再监听消息
  self.addEventListener('message', handleCalculate);
  // 给主线程发送就绪信号
  self.postMessage('worker_ready');
  console.log('WASM模块初始化完成，Worker已就绪');
}

// 处理计算请求
function handleCalculate(e: MessageEvent) {
  const { number1, number2 } = e.data;
  console.log('Worker is calculating with data...', { number1, number2 });
  const sum = wasmInstance.sum(number1, number2); // 对应WASM导出的sum函数
  self.postMessage(sum);
}

// 启动WASM初始化
initWasm();

2. 主线程等待Worker就绪信号再发请求 #

主线程不要立即发送计算请求，先等待Worker的就绪通知：

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));

worker.addEventListener('message', (e) => {
  // 收到就绪信号后发送计算请求
  if (e.data === 'worker_ready') {
    worker.postMessage({ number1: 1, number2: 2 });
    console.log('Message posted to worker with numbers 1 and 2.');
  } else {
    // 处理求和结果
    console.log('Message received, sum is: ', e.data);
  }
});

3. Webpack环境适配配置 #

Webpack需要开启异步WASM支持并配置相关规则，确保WASM能在Worker中正确加载：

// webpack.config.js
module.exports = {
  experiments: {
    asyncWebAssembly: true, // 开启异步WASM支持
    topLevelAwait: true // 若Worker中用了顶层await需开启
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'webassembly/async',
        exclude: /node_modules/
      }
    ]
  }
};

同时调整Worker的导入方式（Webpack环境）：

// main.ts
import Worker from 'worker-loader!./worker.ts'; // 使用worker-loader
const worker = new Worker();

验证结果 #

• Vite环境：无需断点，主线程等待Worker就绪后发送请求，可正常输出求和结果
• Webpack环境：配置完成后，WASM模块可在Worker中正确初始化并处理计算请求

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