Shopify 性能优化

Shopify 应用重复注入脚本怎么排查

现象#

页面里同一个应用脚本出现两三次,或者 jQuery 被加载了三个版本,Network 面板重复请求一堆。

原因#

  • app embed 与 theme app extension 各注入一次
  • section 被多个模板引用,脚本跟着重复输出
  • 应用在 theme.liquid 与 section 里各写了一份

处理步骤#

  1. 在页面源码搜索脚本域名,统计出现次数
  2. 用 {% if template %} 或一次性标记变量控制只输出一次
  3. 告知应用方改为 app embed 单点注入,删除主题硬编码
  4. 合并同版本库,保留一个来源

验收标准#

每个第三方脚本只加载一次,Network 请求数下降,控制台无「已定义」类报错。

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