提醒:本文最后更新于 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 问题。