尤其对于计算量大的需求,js本身不支持多线程,使用web worker可实现类似多线程的效果,不会影响主线程的运行,不会造成页面卡顿。
1、引入
yarn add worker-loader -D
2、配置
vue.config.js中增加
config.module
.rule('worker')
.test(/\.worker\.js$/)
.use('worker-loader')
.loader('worker-loader')
.end()
config.module.rule('js').exclude.add(/\.worker\.js$/)
3、使用
a. 创建.worker.js文件
例如timer.worker.js
addEventListener('message', function(e) {
console.log(e, 'message')
this.timer()
})
b. vue页面导入
import Worker from './timer.worker.js'
async beforeMount() {
this.worker = new Worker()
this.worker.postMessage('message')
},