前言
网上关于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
- 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，至今我也不知道原因