前言

网上关于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加入以下配置```jschainWebpack: (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的插件

一开始在rollup/awesome社区找了一个叫@surma/rollup-plugin-off-main-thread的插件，但是折腾了一天，并不好用。可能是我的打开方式不对，有使用成功的大佬欢迎评论留言。

隔了一天后。放弃了上面的插件，再找了一个名为rollup-plugin-web-worker-loader的插件。虽然不是官方社区提供的插件，但是用起来非常的丝滑，配置也很多，可以满足大部分场景。具体配置直接参考使用文档即可，强推！

结语

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

原文：https://juejin.cn/post/7098254356146814990