项目中使用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/7098254356146814990E-MAIL:11247931@qq.com