如何通过Webpack在WebWorker中同步加载WASM模块

你的推测正确，开启asyncWebAssembly配置后，webpack会将WASM的编译、实例化逻辑转为异步执行，你看到的同步import只是语法糖，实际调用greet方法时如果WASM还未初始化完成，就会出现挂起，属于典型的竞态问题。

以下是WebWorker环境下强制同步加载WASM的实现方案：

步骤1：调整webpack配置 #

关闭默认异步WASM处理，将WASM文件识别为静态资源返回访问路径：

// webpack.config.js
module.exports = {
  // 其余原有配置保留
  experiments: {
    asyncWebAssembly: false, // 关闭默认异步WASM处理逻辑
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/wasm/[contenthash][ext]' // 可自定义输出路径
        }
      }
    ]
  }
}

步骤2：确认编译参数 #

编译Rust代码时继续使用wasm-pack build --target web即可，不要使用--target bundler，后者会依赖webpack的异步WASM加载能力。

步骤3：WebWorker内实现同步加载初始化 #

利用WebWorker环境支持同步XHR的特性，先同步拉取WASM的二进制内容，再手动同步初始化wasm-bindgen导出的实例：

// 导入wasm-bindgen生成的初始化方法、业务函数，以及WASM文件的静态路径
import init, { greet } from "./pkg";
// 导入WASM文件，webpack会返回打包后的实际访问路径，xxx替换为你项目的wasm实际文件名
import wasmFileUrl from "./pkg/xxx_bg.wasm";

// 同步请求WASM二进制内容
const xhr = new XMLHttpRequest();
xhr.open('GET', wasmFileUrl, false); // 第三个参数为false表示发起同步请求
xhr.responseType = 'arraybuffer';
xhr.send();

// 同步初始化WASM实例，init方法传入ArrayBuffer时会同步完成编译、实例化
init(xhr.response);

// 初始化完成后再定义后续业务逻辑，完全消除竞态
console.log("****after wasm sync init")
function ffi_greet(connector, args) {
    console.log("*****GREET*********", args)
    return greet(args[0])
}

方案说明 #

• WebWorker环境中运行的同步XHR不会阻塞主线程，符合你暂不考虑性能损耗的验证需求
• 所有WASM加载、初始化逻辑均为同步执行，确保后续调用导出方法时实例已经准备完成，彻底避免初始化竞态导致的挂起问题

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