vite中使用Web Worker 脚本

MDN对Web Worker的说明
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）。

在vite中使用web worker
这里我们通过一个按理来展示
1、新建example.js文件

const start = () => {
  let count = 0;
  setInterval(() => {
    // 给主线程传值
    postMessage(++count);
  }, 2000);
};

start();

2、在对应页面引入该文件，引入时加上Worker后缀，告诉vite这是Web Worker脚本文件

<template>
  <div></div>
</template>

<script setup lang="ts">
import Worker from "./example.js?worker";
// 1、初始化worker实例
const worker = new Worker();
// 2、主线程监听worker的信息
worker.addEventListener("message", (e) => {
  console.log(e);
});
</script>

<style lang="scss" scoped></style>

此时我们页面就可以打印Worker传给主线程的信息

此时Web Worker脚本已经成功执行，也能与主线程正常通信