如何在本地加载 wasm 模块？

Question

我正在尝试使用 JavaScript 和 WebAssembly 制作一个简单的、自包含的（只有一个 .html 文件和一个 .wasm 文件）离线数据可视化。但是，我在从本地文件加载 WASM 模块时遇到了麻烦。

第一个麻烦是CORS。尝试使用相对或file://URL加载任何 JS 模块会导致安全错误。在 Firefox 上，我设法禁用了本地 CORS，但这令人讨厌且过于宽容。在 Chrome 上，我需要用标志启动浏览器。从用户的角度来看，这些都不是入门者。有没有办法从本地文件加载 JS 或 WASM 模块而不会遇到 CORS 问题？

绕过 CORS，第二个麻烦是，虽然 Firefox 能够加载 JS 模块，但它会因 WASM 模块而失败：（我的实际错误消息是日文的，但我认为这是英文的）“加载失败”。 wasm”与来源'。没有显示更多信息。在 Chrome 上，错误消息是“无法加载模块脚本：服务器以非 JavaScript MIME 类型“”响应。根据 HTML 规范对模块脚本执行严格的 MIME 类型检查。'，这表明两种浏览器可能都无法猜测 MIME 类型。

这两个问题都可以通过设置 HTTP 服务器来解决，但这完全违背了拥有一个只需要浏览器运行的简单、自包含文件的目的。

有没有办法只用本地文件加载和调用 WASM？

Answer 1

您可以将 wasm 编码为 base64，然后像这样加载它（据我所知，没有大小限制 - 绝对适用于 5Mb+）

Module.wasmBinaryFile="data:application/wasm;base64,AGFzbQEAAAABww...

Answer 2

您可以将 Wasm 二进制文件内联为 Uint8Array，并以这种方式实例化它。不过，只有当它足够小时，它才有效。我相信如果 Wasm 超过 4KB，您会收到错误消息。

// your Wasm file as a Uint8Array
const wasmSourceCode = new Uint8Array([0, 97, 115, 109 ...]);
const wasmModule = new WebAssembly.Module(wasmSourceCode );
const wasmInstance = new WebAssembly.Instance(wasmModule);