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/

巴特西

vue中使用web worker

最新文章

热门文章