如何在不部署worker.js的情况下使用Web Worker

前言

  这里不是一篇Web Worker的扫盲文章，也没有更多的知识可以细究。只是一个觉得多部署一个文件很麻烦（因为没有public）又想试试Web Worker的前端菜鸟，在阅读inmap的源码中偶然发现的一个技巧，即通过createObjectURL和Blob实现不部署worker.js文件调用它。并且我感觉这个技巧并不是那么鸡肋，也没有在讲述web worker文章的地方看到过，这是写下来的主要原因。

如何使用

• 首先，在你为你的worker.js想要执行的东西创建一个相同内容的函数，函数放在哪里无所谓，反正只要在本文件引入就会被打包进来。example:

const workerFun = () => {
  self.onmessage = (event) => {
    const { data } = event;
    //do something
    self.postMessage({ pixelData });
  };
};

• 然后将其转换为字符串，请记得在它前后加上()()将它变成立即执行的函数。

const workerContent = `(${workerFun})()`;

• 之后使用URL.createObjectURL和new Blob()给它一个短暂的URL

const workerUrl = URL.createObjectURL(
      new Blob([workerContent], { type: 'application/javascript' }),
);

• 最后就是一个new Worker()，你就不用担心它的部署问题直接使用了

const worker = new Worker(workerUrl);

ending