关于VueJs 等使用webpack工具的前端框架使用 WebWorker

WebWorker 

具体API指南参考:https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers

详细介绍了webworker 支持的JS API。

VueJs 中使用webWorker

有大神已经封装了 Vue-Worker ,具体可参看。

我们要用原生的 。步骤如下:

1.安装 worker-loader     ;yarn  add  worker-loader。

2.在 Webpack 中配置 worker-loader 配置信息;

{  

  test: /\.worker\.js$/,                            //以.worker.js结尾的文件将被worker-loader加载 

  use: { loader: 'worker-loader' }         //指定文件的加载器

}

3.接下来就是像普通js 项目一样使用就可以。建立以:.worker.js 结尾的JS文件 例如:request.worker.js.该worker文件用于向后台请求数据。

request.worker.js

4.在需要调用的地方直接 初始化即可。像localStorage类似的对象,不能在Worker中操作,只能提前获取到值传过去。但是不能传DOM对象、 localStorage对象!!!

test.js

5.注意:不能操作window! 不能操作DOM!不能操作 Data Store!  具体能操作哪些接口 请看第一条。

你可能感兴趣的:(关于VueJs 等使用webpack工具的前端框架使用 WebWorker)