使用URL.createObjectURL/Blob创建Web Worker时出现无效GET请求问题

原因分析 #

问题出在WorkerBuilder构造函数第一行的super(worker)调用：
因为WorkerBuilder继承了Worker，调用super(worker)会触发父类Worker的构造逻辑。但你传入的worker是转译后的TS函数，而标准Worker构造函数要求第一个参数是脚本URL字符串——当它收到非URL参数时，会把参数的toString()结果当作URL发起GET请求，这就是你看到的异常请求的来源。

而且你最后返回的是全新的Worker实例，之前的super调用完全多余，反而触发了无效的网络请求。

解决办法 #

直接删除构造函数里的super(worker)这一行即可，修改后的代码如下：

// worker-builder.js
export default class WorkerBuilder extends Worker {
  constructor(worker: any) {
    // 移除多余的super调用
    const code = worker.toString();
    const blob = new Blob([`(${code})()`], { type: 'application/javascript' });
    return new Worker(
      /* webpackChunkName: "build-worker" */
      URL.createObjectURL(blob),
    );
  }
}

优化建议（可选） #

其实WorkerBuilder没必要继承Worker，因为你最终返回的是全新的Worker实例，继承反而容易造成逻辑误解。改成普通工厂函数会更清晰：

// worker-builder.js
export default function WorkerBuilder(worker) {
  const code = worker.toString();
  const blob = new Blob([`(${code})()`], { type: 'application/javascript' });
  return new Worker(
    /* webpackChunkName: "build-worker" */
    URL.createObjectURL(blob),
  );
}

调用方式保持不变，这样逻辑更直观，也避免了继承带来的不必要问题。

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