vite+vue3使用webworker

1、具体的worker文件

//search.worker.js
/** 监听主线程发送的消息*/
self.onmessage = (messageEvent) => {
   ...
   ...
  //把处理后的结果返回
  this.postMessage(**);
};

2、包装worker相应的逻辑

//search.js
import workerCode from './search.worker.js?raw';//?raw是为了标识以文件的方式import,而不是以内容
const blob = new Blob([workerCode], { type: 'application/javascript' });
const workUrl = window.URL.createObjectURL(blob);
let worker = null;
export const searchFn = (options) => {
  return new Promise((resolve, reject) => {
    worker = new Worker(workUrl);
    // 通过通道传数据
    worker.postMessage(JSON.stringify(options));
    worker.onmessage = (e) => {
      // 获取到的搜索结果
      let _data = e.data && JSON.parse(e.data);
      resolve(_data);
    };
  });
};

3、在vue文件中使用时

//index.vue
import { searchFn } from './search.js';
searchFn(**).then(res=>{
  //获取到的结果
  }
).catch(err=>{
  }
)

4、扩展

①、关于window.URL.createObjectURL，可以参考文章