如何为BigCommerce CDN托管图片添加max-age缓存配置

首先明确核心规则：BigCommerce全托管模式下，官方CDN（域名后缀为cdn11.bigcommerce.com）的返回响应头由平台全局管控，商家后台、Stencil主题层没有直接修改CDN缓存规则的原生入口，客服提到的默认缓存策略确实存在，WebPageTest检测报错可以按以下路径排查调整：

第一步：先定位报错资源的实际属性 #

先通过浏览器DevTools的网络面板，筛选出所有提示无max-age、缓存过期的图片资源，核对资源来源：

• 如果资源不属于BigCommerce官方CDN，是第三方插件（评论系统、营销弹窗、数据分析工具）加载的自有图片，这类资源需要联系对应插件服务商调整缓存策略，和BigCommerce平台无关
• 如果资源确实托管在BigCommerce官方CDN上，查看实际返回的Cache-Control头：正常平台给静态图片默认返回的是public, max-age=31536000（1年有效期）的缓存规则，如果实际返回头没有max-age或者有效期极短，基本是资源URL不符合CDN缓存规则导致的

第二步：可落地的调整操作 #

针对官方CDN上缓存规则异常的图片，可以做以下调整：

• 清理图片URL的非必要参数：不要在富文本、主题模板代码里给图片URL拼接随机数、自定义版本号这类动态参数，仅保留Stencil原生支持的尺寸裁剪参数（比如/w/500/h/500这类），带非标准动态参数的URL会被CDN判定为动态资源，不会触发长缓存规则
• 替换自定义图片调用逻辑为Stencil原生方法：如果是在Cornerstone主题模板里自定义调用图片，不要硬编码图片路径，统一用{{getImage}}模板助手生成资源URL，通过该方法生成的地址会自动匹配CDN长缓存规则，自动附加正确的max-age头
• 开启静态资源版本戳：在Stencil主题的config.json配置里开启useVersionedAssets参数，开启后平台会给所有主题静态资源、上传的图片附加基于文件内容生成的哈希后缀，CDN会自动给这类带哈希的资源返回1年有效期的max-age头，资源更新时哈希会同步变化，不会出现用户端缓存不更新的问题
• 排查图片优化工具的改写逻辑：如果你之前做过图片格式转换、压缩优化，确认优化工具没有把图片URL重写到非官方CDN节点，也没有给URL附加自定义参数，这类改写会直接绕过平台默认的长缓存规则

针对WebPageTest评分的特殊说明 #

• WebPageTest默认将max-age小于30天的资源判定为缓存不达标，如果你扫描到的短缓存资源是购物车、结账、账号中心这类动态页面的资源，不用做调整：这类路径的资源本身涉及用户动态数据，平台固定使用短缓存策略，无法修改，你可以在WebPageTest的测试配置里排除/cart/、/checkout/、/account.php/这类动态路径的资源检测，这类资源不影响前台商品页、首页等静态内容页的实际加载性能
• 不要尝试通过Service Worker跨域改写CDN资源的缓存头，BigCommerce官方CDN没有开放对应CORS权限，这类操作会导致资源加载跨域报错

内容的提问来源于stack exchange，提问作者alexispsc