Hydrogen loader 里多个请求怎么并行不串行
现象#
商品页要取商品、推荐、评论三份数据,写法是三个 await,首屏慢了一倍。
原因#
- 顺序 await 导致瀑布式请求
- 推荐数据依赖商品 ID 时未做两段式并行
- 未使用
Promise.all
处理步骤#
- 无依赖的请求用
Promise.all([a, b, c])并行 - 有依赖时先取主数据,再用
Promise.all并发取下游 - 用
defer把非首屏数据延后,先返回骨架 - 合并为一次 GraphQL 别名查询,减少往返
验收标准#
首屏 loader 耗时下降 40% 以上,Network 中多个请求并行发出。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。