Webpack打包的Node.js应用动态导入WASM执行顺序异常问题

执行顺序不符合预期的本质是Webpack的ESM模块加载机制和你的导出写法不匹配：

• 你在WASM库入口导出的default是一个内部包裹了WASM加载、初始化逻辑的Promise，但Webpack处理跨包动态导入时，只会等待入口模块本身的同步执行完成，不会自动await你导出值里嵌套的Promise。
• 你的库入口代码执行到export default import("./pkg")...这行时，会立刻把处于pending状态的Promise挂到default导出上，此时入口模块本身已经执行完毕，Webpack会直接把模块命名空间对象返回给业务侧的await import("s-wasm")，不会等内部的./pkg加载和initialize_sync()执行完成，因此业务侧的日志会先打印，WASM初始化的日志后输出。

方案1：调整WASM库导出逻辑（推荐，业务侧无需修改调用代码） #

使用顶层await改写WASM库的入口代码，让Webpack识别到该模块是需要等待异步执行完成的异步模块，确保模块导出时WASM已经完成初始化：

注意：该方案需要Webpack 5+支持，开启配置项experiments.topLevelAwait = true即可，Webpack 5新版本默认已开启该特性。

const s = await import("./pkg");
const result = s.initialize_sync();
console.log("result = ", result);
export default s;

改完后，Webpack会等待顶层的WASM加载、初始化逻辑全部执行完成，才会把模块标记为加载完成，业务侧的await import("s-wasm")会在初始化结束后才resolve，日志顺序就会和你预期的一致。

如果你的构建环境暂时不支持顶层await，可以通过Webpack的output.library配置把库声明为异步库，对外直接暴露初始化完成的模块实例，不要把Promise嵌套在default属性里。

方案2：业务侧显式等待导出的Promise（仅适合无法修改WASM库的临时场景） #

如果暂时无法调整WASM库的代码，业务侧调用时需要额外等待default属性上的Promise，等WASM初始化完成后再执行后续逻辑：

const sModule = await import("s-wasm");
const s = await sModule.default;
console.log("2 s = ", s);

该方案会把WASM库的内部初始化逻辑暴露给使用方，不符合模块封装原则，不建议作为长期方案使用。

如果你的WASM库是通过wasm-pack编译生成的，建议直接使用wasm-pack输出的ESM入口文件，官方生成的入口已经做了Webpack兼容处理，不需要额外手写动态导入和初始化逻辑，不会出现加载顺序问题。

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