项目中使用webworker遇到的问题

发布网友发布时间：2024-10-23 19:05

我来回答

共1个回答

热心网友时间：2024-10-23 19:14

前言

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

使用场景

在vue-cli（webpack）项目下使用

在vite项目下使用

在rollup中打包为工具库使用

web-worker示例

xxx.worker.js文件

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

使用

importWorkerfrom"xxx.worker.js"constworker=newWorker()

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

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

importWorkerfrom"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

全部栏目

项目中使用webworker遇到的问题