Shopify 主题 JS 打包太大怎么拆

现象#

主题的 theme.js 有 400KB，首页几乎用不到购物车与商品页逻辑，却全量加载。

原因#

• 所有模块打进一个入口，没有按页面拆分
• 引入了完整工具库（lodash、moment）只用了一两个函数
• 开发依赖未剔除，source map 与注释进了生产包

处理步骤#

1. 按页面拆入口：product.js、cart.js、collection.js，用 {% if template == 'product' %} 条件加载
2. 用原生 API 替代大库：fetch、Intl.DateTimeFormat、可选链
3. 构建开启 minify 与 tree-shaking，确认没有把 devDependency 打进去
4. 非关键脚本加 defer，交互类用动态 import() 按需加载

验收标准#

首页 JS 传输体积降到 150KB 以内，TBT 明显下降，各页面功能正常。