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

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

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

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

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

复制代码
// a.jslet worker = new Worker('a.js') worker.postMessage({       method: 'transferLang' }) worker.onmessage = function (e) {       init(e.data.params) }
复制代码
复制代码
// b.jsself.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文件，然后直接实例化这个文件即可，如下所示：