在现代前端中使用 Worker
本文最后更新于:2020年4月20日 下午
场景
由于需要在 Browser 进行大量的计算,所以吾辈开始尝试使用 webworker 分离 CPU 密集型的计算操作,最终找到了 comlink 这个库,但之前在 vue 中使用时发生了错误,目前看起来已经得到了解决,所以在此记录一下。
调研方案
- web-worker-proxy:结合了 proxy/promise/webworker 的强大工具库,但如何在 ts 中使用却是个问题
- Orc.js:一个简单的 worker 封装
- VueWorker:结合 vue 的 worker 封装,无法理解,难道真的会有人在 vue 组件中进行大量计算么?
- comlink:Chrome 的一个基于 proxy/promise/webworker 的封装库
- worker-plugin:和上面的同属 chrome 实验室的一个 webpack 插件
最后决定使用 comlink 结合 worker-plugin 实现简单的 worker 使用。
相关问题:comlink-loader 工作不正常
使用步骤
添加相关依赖
1 |
|
在 webpack 中添加插件
1 |
|
这里一般不需要配置,如果需要,可以参考:worker-plugin
添加一个简单的 hello.worker.ts
1 |
|
在 main.ts
中使用
1 |
|
但这里并不是类型安全的,所以我们可以实现正确的类型。
添加一个 hello.worker.ts 暴露出来的类型 HelloWorkerType
1 |
|
同时为了支持在 main.ts 中使用正确的类型,需要使用泛型
main.ts 修改如下
1 |
|
本质上这里使用 .
的方式访问 worker 中的内容依赖于 Proxy
,所以不需要使用类似于 await (await obj.info).city
这种奇怪的代码。
参考
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!