WebWorkers在项目中的使用案例

Worker | 文档

worker 线程的关闭在主线程和 worker 线程都能进行操作，但对 worker 线程的影响略有不同。

// main.js（主线程）
const myWorker = new Worker('/worker.js'); // 创建worker
myWorker.terminate(); // 关闭worker
复制代码

// worker.js（worker线程）
self.close(); // 直接执行close方法就ok了
复制代码

无论是在主线程关闭 worker，还是在 worker 线程内部关闭 worker，worker 线程当前的 Event Loop 中的任务会继续执行。至于 worker 线程下一个 Event Loop 中的任务，则会被直接忽略，不会继续执行。

区别是，在主线程手动关闭 worker，主线程与 worker 线程之间的连接都会被立刻停止，即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用 postMessage() 方法，但主线程不会再接收到消息。

在 worker 线程内部关闭 worker，不会直接断开与主线程的连接，而是等 worker 线程当前的 Event Loop 所有任务执行完，再关闭。也就是说，在当前 Event Loop 中继续调用 postMessage() 方法，主线程还是能通过监听message事件收到消息的

new Worker() 用于创建一个新的 Web Worker 线程。Web Worker 是浏览器提供的一种多线程机制，它可以在后台执行 JavaScript 代码，不会阻塞主线程，从而提高了 Web 应用程序的性能和响应能力。
 
以下是一个示例代码，演示了如何使用 new Worker() 创建一个新的 Web Worker 线程：
 
// 创建一个 Web Worker 线程
const worker = new Worker('worker.js');
在上述示例中，我们创建了一个名为 worker 的 Web Worker 线程，并指定了要执行的 JavaScript 文件为 worker.js。
 
需要注意的是，Web Worker 线程中不能直接访问 DOM，也不能使用一些浏览器环境中的 API（如 alert()、confirm()、prompt()、localStorage 等）。同时，Web Worker 线程和主线程之间是通过消息通信来进行交互的，要向 Web Worker 线程发送消息，可以使用 worker.postMessage() 方法；要监听 Web Worker 线程的消息，可以使用 worker.onmessage 事件。

‌一、直接引用绝对路径文件‌
若Worker脚本文件以‌静态资源形式存放‌（如public/worker.js），可直接通过路径引用：

vue2// 主线程代码

// worker.js 代码

vue3+vite+ts  //主线程代码

 // worker.js 代码

二、需要配置的情形

使用动态模块路径或需要引入第三方库时，必须通过worker-loader处理：‌

1.安装依赖‌ npm install worker-loader -D

2.配置vue.config.js‌    添加Webpack规则处理.worker.js后缀文件:

chainWebpack: config => {
 config.module .rule('worker') .test(/\.worker\.js$/) .use('worker-loader') .loader('worker-loader') .end(); 
config.module.rule('js').exclude.add(/\.worker\.js$/) 
}

 //TypeScript项目‌
//需声明Worker模块类型（创建worker.d.ts文件）：

declare module '*.worker.js' { class WebWorker extends Worker { constructor(); } export default WebWorker; } }

3.案例：

主线程代码

work.js

self.onmessage=(event)=>{
  const result = event.data.reduce((acc, cur) => acc + cur, 0)
  self.postMessage(result)
  self.close()
}