使用 WebWorker 的故障小总结
提醒:本文最后更新于 2018/05/23 ,文中所描述的信息可能已发生改变,请谨慎使用。
因为性能问题,在客户端启用 WebWorker 来优化性能(成果就是在部分烂机器上面,fps 从20提高到25,都是泪)
在构建流程内整合 WebWorker
目前架构基于 Webpack ,使用 worker-loader 可以很方便让 Webpack 对 worker 部分独立打包。
https://github.com/webpack-contrib/worker-loader
其中包括几个坑
使用 inline loader 而不是在 webpack.config 的 rules 配置 worker-loader
如果代码依赖管理不当,遍历依赖时出现循环命中 worker loader 的 rule 时,会导致死循环,webpack 直接崩溃。
跨域问题
由于代码部署在 OSS 上,存在跨域问题。目前 WebWorker 不支持 CORS。
使用 worker-loader 的 inline 方法,将 worker 的脚本以 blob 的形式同域引入。如果 worker 内使用的 fetch 请求后端,务必补全完整 url,不能依赖 schema 的自适应。类似参考 style-loader 的 blob 问题。