使用worker-loader在vue中使用worker,并且兼容ie11
worker多线程可以让网页进行大量数据处理的时候,避免UI渲染阻塞。我这次使用woker来进行数据的预先获取数据并且处理由于数据预计会比较多,如果一次性获取的话,UI渲染就会阻塞,导致用户体验下降。案例MDN上介绍以及非常详细由于woker不支持file路径,所以一般都是讲文件布置到服务器生成一个url,但是在开发过程中这样太不方便了,所以webpack上有一个loader:work...
·
worker
多线程可以让网页进行大量数据处理的时候,避免UI渲染阻塞。
我这次使用woker来进行数据的预先获取数据并且处理
由于数据预计会比较多,如果一次性获取的话,UI渲染就会阻塞,导致用户体验下降。
案例
由于woker不支持file路径,所以一般都是将文件布置到服务器生成一个url,但是在开发过程中这样太不方便了,所以webpack上有一个loader:worker-loader
安装
npm i worker-loader --save-dev
webpack配置
module.exports ={
/***/
module:{
rules:[
/**
省略
*/
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: { inline: true, name: 'workerName.[hash].js' },
}
}
]
}
/***/
}
看了配置就知道,woker的文件是以worker.js
结尾的。
worker文件
// test.worker.js
// Respond to message from parent thread
self.addEventListener('message', (event) => {
console.log('worker has got')
/**数据处理*/
self.postMessage(handleDatas(event.data))
})
app.js
import test from "../worker/test.worker.js";
module.exports={
created(){
let myWorker = new test();
myWorker.postMessage(datas); // 发送
myWorker.onmessage = event => {
// 接收
this.totalDatas = this.totalDatas.concat(
event.data.slice(sliceIndex)
);
};
}
}
大部分网上的例子到此就结束了,但是实际上直接这样使用会发现使用不了。
问题与解决
在ie11中出现不知名的错误
原因推测:
应该是import在ie11上出现了问题,导致不能正确的导入worker.js
在worker-loader上加上babel-loader进行转换就可以兼容ie11
{
test: /\.worker\.js$/,
use: [{
loader: 'worker-loader',
options: { inline: true, name: 'workerName.[hash].js' },
},
{ loader: 'babel-loader' }]// 增加es6 转换语法
}
添加之后,就可以正常地使用了。
官方的文档也写清楚了,如果使用ES2015就需要配置balbel-loader
但是网上的大部分案例都没有注明这一个,因为没有配置在chorm也是能够正常运行的,但是在ie却不行。
更多推荐
已为社区贡献6条内容
所有评论(0)