vue结合web-worker构建多线程

尤其对于计算量大的需求，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')
 },