如何解决含WASM的JS首次加载时MyModule未定义问题？

你的推测完全正确：首次加载时WASM文件还在网络下载中，JS代码已执行但模块未初始化完成，刷新时WASM被浏览器缓存，加载速度足够快所以模块已就绪。以下是几种可行的解决方案：

方案一：将模块导出为Promise，等待WASM加载完成 #

修改代码让模块返回一个Promise，确保只有WASM加载完成后才能实例化类：

1. 修改keypad.js，异步加载WASM核心模块：

import '../css/style.css';

// 先保存WASM模块的加载Promise
const corePromise = import('../pkg/~');
let core;

export default class KeyPad {
  // 静态初始化方法，等待WASM加载完成
  static async init() {
    if (!core) {
      core = await corePromise;
    }
    return KeyPad;
  }

  // 你的类方法，确保依赖core的逻辑在init之后执行
  showKey() {
    // 这里可以安全使用core模块
    console.log(core);
    // 你的业务逻辑...
  }
}

2. 修改index.js，导出Promise形式的模块：

import KeyPad from "./keypad";

// 导出初始化Promise
export default KeyPad.init();
export { KeyPad };

global.KEYPAD = KeyPad.init();

3. 在HTML中使用async/await等待模块就绪：

<script src="./dist/result.js"></script>
<script type="application/javascript">
$(async () => {
  // 等待WASM加载完成，获取初始化后的类
  const MyModule = await window.MyModule;
  let myModule = new MyModule({});
  myModule.showKey();
})
</script>

方案二：将WASM嵌入JS实现同步加载（适合小体积模块） #

如果你的WASM文件体积很小，可以让Webpack把它转成Base64嵌入到JS中，避免异步fetch的问题：

修改Webpack配置：

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "result.js",
        webassemblyModuleFilename: "MyModule.wasm",
        library: 'MyModule',
        libraryTarget: 'umd',
        libraryExport: ['default'],
        globalObject: 'this',
        umdNamedDefine: true,
    },
    // 添加以下配置
    module: {
        rules: [
            {
                test: /\.wasm$/,
                type: 'asset/inline', // 将WASM转为Base64嵌入JS
            },
        ],
    },
    experiments: {
        asyncWebAssembly: false, // 关闭异步WASM加载
    },
    // ...其他配置
}

修改后打包的JS会包含WASM内容，加载时无需额外fetch，MyModule会立即可用，HTML中的原有代码无需修改。

方案三：通过类初始化方法确保WASM就绪 #

如果不想修改模块导出形式，可以在类中加入初始化检查，强制调用方先完成WASM加载：

修改keypad.js：

import '../css/style.css';

let core;
const corePromise = import('../pkg/~');

export default class KeyPad {
  constructor(options) {
    if (!core) {
      throw new Error('请先调用KeyPad.init()完成初始化');
    }
    // 构造逻辑...
  }

  static async init() {
    core = await corePromise;
    return KeyPad;
  }

  showKey() {
    // 业务逻辑...
  }
}

HTML中调用：

<script src="./dist/result.js"></script>
<script type="application/javascript">
$(async () => {
  await window.MyModule.KeyPad.init();
  let myModule = new window.MyModule.KeyPad({});
  myModule.showKey();
})
</script>

问题原因说明 #

首次加载时，浏览器需要从网络下载WASM文件，JS代码执行速度远快于WASM的下载+编译速度，导致调用时MyModule还未完成初始化；刷新页面时，WASM文件被浏览器缓存，fetch过程几乎瞬间完成，模块已经初始化完毕，因此可以正常调用。

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