Shopify 模板里输出大 JSON 拖慢 HTML 怎么办

现象#

页面 HTML 有 800KB，大部分是 {{ product | json }} 与全量变体数据，移动端解析慢。

原因#

• 把整个 product 对象序列化给前端，包含描述、图片全集、metafields
• 多个 section 各自输出一份相同数据
• JSON 内联在 HTML 里无法被缓存

处理步骤#

1. 只挑必要字段构造轻量对象：id、title、price、available、options
2. 相同数据只输出一次，放到 <script type="application/json">，其他模块读取复用
3. 变体多时按需通过 Section Rendering API 或 Storefront API 拉取
4. 压缩 HTML，去掉多余空白与注释

验收标准#

HTML 体积降到 200KB 以内，移动端 DOMContentLoaded 明显提前，功能不受影响。