如何让Web Worker加载CDN上与JS同路径的WebAssembly模块？

问题核心：当你从CDN加载library.js时，该脚本内部使用相对路径加载library.wasm，这个相对路径会以当前页面的域名作为基准，而非CDN域名，导致浏览器从本地服务器请求wasm文件。

以下是几种可行的解决方法：

方法1：修改library.js支持自定义WASM路径（推荐） #

如果有权限修改库的代码，给初始化函数添加参数，允许传入WASM文件的完整CDN地址：

// 修改后的library.js
async function library(options = {}) {
  const wasmUrl = options.wasmUrl || './library.wasm'; // 默认保留相对路径
  const response = await fetch(wasmUrl);
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.instantiate(bytes);
  // 返回导出的方法等
}

然后在Worker中调用时传入CDN地址：

importScripts('https://cdn.jsdelivr.net/npm/library@0.0.1/dist/library.js');

onmessage = async function (ev) {
    let lib = await library({
        wasmUrl: 'https://cdn.jsdelivr.net/npm/library@0.0.1/dist/library.wasm'
    });
    // 执行逻辑
};

如果不想手动拼接URL，还可以让library.js自动提取自身的CDN地址：

// 修改后的library.js
async function library(options = {}) {
  // 获取当前脚本的URL（适配importScripts加载场景）
  const stack = new Error().stack;
  const scriptUrlMatch = stack.match(/https?:\/\/[^)]+/);
  const scriptUrl = scriptUrlMatch ? new URL(scriptUrlMatch[0]) : new URL('./library.wasm', self.location);
  
  const wasmUrl = options.wasmUrl || new URL('library.wasm', scriptUrl).href;
  const response = await fetch(wasmUrl);
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.instantiate(bytes);
  // 返回导出内容
}

这样无需手动传入URL，库会自动从加载自身的CDN地址请求wasm文件。

方法2：拦截请求重定向（无需修改库代码） #

如果无法修改library.js，可以使用Service Worker拦截浏览器对library.wasm的请求，将其重定向到CDN地址：

1. 注册Service Worker（在主页面脚本中）：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('Service Worker 注册成功'))
    .catch(err => console.error('注册失败', err));
}

2. 在sw.js中编写拦截逻辑：

self.addEventListener('fetch', (event) => {
  if (event.request.url.endsWith('library.wasm')) {
    // 重定向到CDN地址
    const cdnUrl = 'https://cdn.jsdelivr.net/npm/library@0.0.1/dist/library.wasm';
    event.respondWith(fetch(cdnUrl));
  }
});

方法3：手动加载WASM并传入（需库支持） #

如果库的初始化函数接受预加载的WASM二进制数据，可以先手动从CDN加载wasm文件，再传给库：

importScripts('https://cdn.jsdelivr.net/npm/library@0.0.1/dist/library.js');

onmessage = async function (ev) {
    // 先从CDN加载wasm
    const wasmResponse = await fetch('https://cdn.jsdelivr.net/npm/library@0.0.1/dist/library.wasm');
    const wasmBytes = await wasmResponse.arrayBuffer();
    
    // 假设library函数接受二进制数据作为参数
    let lib = await library(wasmBytes);
    // 执行逻辑
};

这种方式需要库的初始化函数支持直接传入WASM的ArrayBuffer，具体要看library.js的实现。

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