vue中使用web worker

  众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验。web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开启一个线程,用来处理一些比较耗时操作,不影响主线程的进行。

  在实际vue项目的开发使用过程中,还是遇到不少坑,特别记录一下。

  首先,基本的web worker使用直接调用Worker构造函数,如下:

// url: js文件路径
// options: 配置信息
const worker = new Worker(url, options)

  其次,不同模块间的通信主要通过postMessage进行消息推送,通过onmessage进行消息接收,如下所示:

// a.js
let worker = new Worker('a.js')
worker.postMessage({
      method: 'transferLang'
})
worker.onmessage = function (e) {
      init(e.data.params)
}
// b.js
self.onmessage = ev => {
  let funName = ev.data.method
  if (self[funName]) {
    self[funName](ev.data.params)
  } else {
    console.warn(`方法${funName}未定义`)
  }
}

self.transferLang = function () {
  let arr = []
  self.postMessage({
    params: arr
  })
}

  在vue项目中,如果直接使用,首先遇到的问题是worker文件路径与打包解析问题,这种首先需要安装worker-loader,解析web worker,执行以下命令即可:

npm install worker-loader -D

  vue.config.js要添加以下配置:

configureWebpack: config => {
    config.module.rules.push({
      test: /\.worker.js$/,
      use: {
        loader: 'worker-loader',
        options: { inline: true, name: 'workerName.[hash].js' }
      }
    })
  },

  在使用的时候,就不能调用原生的Worker构造函数了,需要手动import worker文件,然后直接实例化这个文件即可,如下所示:

// a.js
import Worker from './b.js'

let worker = new Worker()

  接着,会发现控制台会报错,“window is undefined”,这个是因为worker线程中不存在window对象,因此不能直接使用,要用this代替,要在vue.config.js中添加以下配置:

chainWebpack: config => {
    config.output.globalObject('this')
 }

  接着在打包的时候,也会报错,需要加入以下配置,

parallel: false

  完整的webpack配置如下:

module.exports = {
  configureWebpack: config => {
    config.module.rules.push({
      test: /\.worker.js$/,
      use: {
        loader: 'worker-loader',
        options: { inline: true, name: 'workerName.[hash].js' }
      }
    })
  },
  parallel: false,
  chainWebpack: config => {
    config.output.globalObject('this')
  }
}

  还存在另外一个问题,就是每次修改worker文件时,debugger调试总是保留之前的记录,感觉编译的时候存在缓存,目前解决办法是修改worker.js文件名称,比较繁琐,如果哪位大神有好的建议,不吝赐教,谢谢!

  参考链接:

    Worker: https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/Worker

    Function support: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers#Comparison_of_the_properties_and_methods_of_the_different_type_of_workers

    Worker loader: https://www.webpackjs.com/loaders/worker-loader/

posted @ 2019-09-03 22:07  Gerryli  阅读(...)  评论(...编辑  收藏