Shopify CLI 与 Headless

Hydrogen loader 里多个请求怎么并行不串行

现象#

商品页要取商品、推荐、评论三份数据,写法是三个 await,首屏慢了一倍。

原因#

  • 顺序 await 导致瀑布式请求
  • 推荐数据依赖商品 ID 时未做两段式并行
  • 未使用 Promise.all

处理步骤#

  1. 无依赖的请求用 Promise.all([a, b, c]) 并行
  2. 有依赖时先取主数据,再用 Promise.all 并发取下游
  3. 用 defer 把非首屏数据延后,先返回骨架
  4. 合并为一次 GraphQL 别名查询,减少往返

验收标准#

首屏 loader 耗时下降 40% 以上,Network 中多个请求并行发出。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。