前言

网上关于web-worker概念相关的文章很多，我就不在这里进行概述了。本文主要针对我在实战过程中遇到的问题进行总结。

使用场景

• 在vue-cli（webpack）项目下使用
• 在vite项目下使用
• 在rollup中打包为工具库使用

web-worker示例

• xxx.worker.js文件

(function(){
  self.onmessage = function(e) {
    obj.send(e.data)
  }
  let obj = {
    send(data) {
      const newData = obj.transform(data)
      self.postMessage(newData) // 把处理后的数据发送出去
    },
    // 处理函数
    transform(data) {
      return '我是处理过的数据' + data
    }
  }
})()

• 使用

import Worker from "xxx.worker.js"
const worker = new Worker()

worker.postMessage(data) // 发送原始数据
worker.onmessage = (event) => {
  console.log(event.data) // 处理后的数据
}

三个使用场景分别碰到的问题

vue-cli

需要安装worker-loader，安装后在vue.config.js加入以下配置

chainWebpack: (config) => {
    config.module
      .rule("worker")
      .test(/\.worker\.js$/)
      .use("worker-loader")
      .loader("worker-loader")
      .end();
}
parallel: false

• 注意：worker-loader配置后，本地运行项目/打包后发布的项目都有一定概率加载worker文件404，至今我也不知道原因😰。
• 解决方法：修改.use("worker-loader")为.use("worker")或者.loader("worker-loader")为.loader("worker")或者把.end()去掉等等...之后重新运行/打包即可。
• 补充：解决方法很玄学，有知道原因的大佬可以评论留言。不知道跟我的vue-cli版本有没有关系。（我的vue-cli版本是4.5.8，对应的webpack版本是4.44.2）

vite

啥也不用安装和配置，十分的爽。引用方式如下：

import Worker from "xxx.worker.js?worker"

• 本地运行和打包使用都没发现问题，🐮🍺
• vite库模式还没试过，awesome-vite社区有提供插件，有兴趣的朋友可以试试。

rollup中打包作为工具库

• 打包web-worker需要用到rollup的插件

1. 一开始在rollup/awesome社区找了一个叫@surma/rollup-plugin-off-main-thread的插件，但是折腾了一天，并不好用。可能是我的打开方式不对，有使用成功的大佬欢迎评论留言。
2. 隔了一天后。放弃了上面的插件，再找了一个名为rollup-plugin-web-worker-loader的插件。虽然不是官方社区提供的插件，但是用起来非常的丝滑，配置也很多，可以满足大部分场景。具体配置直接参考使用文档即可，强推！

结语

以上就是我使用web-worker遇到的一些问题，过程中很多问题百度也找不到解决的办法，只能自己去摸索，所以就写了这篇文章，希望能帮助到遇到一样困境的朋友。写的文章还很少，不足的地方欢迎大家指出。喜欢的点个赞👍 吧！