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/