使用worker-loader在vue中使用worker，并且兼容ie11

worker

多线程可以让网页进行大量数据处理的时候，避免UI渲染阻塞。
我这次使用woker来进行数据的预先获取数据并且处理
由于数据预计会比较多，如果一次性获取的话，UI渲染就会阻塞，导致用户体验下降。

案例

MDN上介绍以及非常详细

由于woker不支持file路径，所以一般都是将文件布置到服务器生成一个url，但是在开发过程中这样太不方便了，所以webpack上有一个loader:worker-loader

安装

npm i worker-loader --save-dev

webpack配置

module.exports ={
     
	/***/
	module:{
     
		rules:[
			/**
				省略
			*/
			{
     
        	test: /\.worker\.js$/,
	        use: {
     
	          loader: 'worker-loader',
	          options: {
      inline: true, name: 'workerName.[hash].js' },
	
	        }
	      }
		]
	}
	/***/
}

看了配置就知道，woker的文件是以worker.js结尾的。

worker文件

// test.worker.js
// Respond to message from parent thread
self.addEventListener('message', (event) => {
     
  console.log('worker has got')
  /**数据处理*/
  self.postMessage(handleDatas(event.data))
})

app.js

import  test from "../worker/test.worker.js";
module.exports={
     
	created(){
     
		let myWorker = new test();
        myWorker.postMessage(datas); // 发送
        myWorker.onmessage = event => {
     
          // 接收
          this.totalDatas = this.totalDatas.concat(
            event.data.slice(sliceIndex)
          );
        };
	}
}

大部分网上的例子到此就结束了，但是实际上直接这样使用会发现使用不了。

问题与解决

1. 
   在ie11中出现不知名的错误

原因推测：

应该是import在ie11上出现了问题，导致不能正确的导入worker.js

在worker-loader上加上babel-loader进行转换就可以兼容ie11

     {
     
        test: /\.worker\.js$/,
        use: [{
     
          loader: 'worker-loader',
          options: {
      inline: true, name: 'workerName.[hash].js' },

        },
        {
      loader: 'babel-loader' }]// 增加es6 转换语法
      }

添加之后，就可以正常地使用了。

官方的文档也写清楚了，如果使用ES2015就需要配置balbel-loader

但是网上的大部分案例都没有注明这一个，因为没有配置在chorm也是能够正常运行的，但是在ie却不行。