将 WebAssembly 与 Web Workers 和 CDN 结合使用

Question

我想在 Web Worker 中使用 WebAssembly 模块。游戏中有三个文件：

library.wasm

、

library.js

和

library-worker.js

。如果所有这些都托管在同一台服务器上，并且工作代码如下所示，那么一切都会正常工作：

importScripts ('library.js');

onmessage = async function (ev)
{
    let lib = await library ();
    // do some cool stuff
};

当我尝试使用托管在另一台服务器上的库版本时，就会出现问题，如下所示：

importScripts ('https://cdn.jsdelivr.net/npm/[email protected]/dist/library.js');

onmessage = async function (ev)
{
    let lib = await library ();
    // do some cool stuff
};

主js文件加载成功，但仍然在本地查找

library.wasm

文件。有没有办法让它从与js文件相同的cdn加载wasm文件？

Answer 1

同时我找到了解决方案。可以像这样覆盖 wasm 搜索路径：

importScripts ('https://cdn.jsdelivr.net/npm/[email protected]/dist/library.js');

onmessage = async function (ev)
{
    let modulOverrides = {
        locateFile: function (path) {
            return 'https://cdn.jsdelivr.net/npm/[email protected]/dist/library.wasm';
        }
    };
    let lib = await library (modulOverrides );
    // do some cool stuff
};