Webpack项目中使用Web Worker

详细看 https://juejin.im/post/5acf348151882579ef4f5a77
官方 https://webpack.docschina.org/loaders/worker-loader/

1 安装

项目工程目录下安装loader,目地是让Webpack识别worker文件

npm install -D worker-loader

2 配置webpack文件

向webpack配置文件中添加loader的配置

rules: [
      {
        test: /\.worker\.js$/, // 以.worker.js结尾的文件将被worker-loader加载
        use: { loader: 'worker-loader' }
      }
    ]
  },

3 编写Worker文件以及加载, 文件名必须以 .worker.js 结尾

test.worker.js文件如下,

onmessage = function(ev){    // 也可以是self.onmessage
  // 工作线程收到主线程的ev.data
};
let msg = '工作线程向主线程发送消息'
postMessage(msg);     // 也可以是self.postMessage, msg可以直接是对象

app.js文件如下

import Worker from './test.worker.js';
// 创建 worker 实例
var worker = new Worker(); // 传入 worker 脚本文件的路径即可
worker.postMessage({ a: 1 });
worker.onmessage = function (event) {
    console.log(event.data)
};

worker.addEventListener("message", function (event) {});

worker中不能识别window,但是可以识别websocket, location,navigator , 通过使用worker-loader我们可以在webpack自动化开发中方便的使用webworker来提供页面的性能。

经实际项目中测试，websocket连接从主线程中移到worker子线程中后，页面性能明显提升，并且解决了websocket高频率推送数据时页面假死的问题。

worker不只可以用到websoket连接中，还可以用到大文件上传的功能中，以此来提高页面的用户体验度。火狐所开发的用于pdf在页面中渲染的pdfjs中，对于pdf的数据解析也是采用了在worker中处理的方案。

在不使用worker的情况下，js是单线程的，那么即使是ajax请求，websocket推数据，都会影响页面的渲染和重绘，以至页面事件的响应。如果页面的某项操作与页面dom无关，并且耗时较长，那么就可以把它通过worker来执行，以此来解放页面的渲染和事件循环。