技术分享 h5游戏图用cdn的最佳缓存策略与资源命名规范

1.

为什么要对H5游戏图做专门的缓存策略

- 避免频繁下载大图导致玩家流量和延迟上升。
- 提高首帧加载速度，利用长缓存加速复访用户体验。
- 与版本化结合，既保证缓存命中也能快速发布素材更新。

2.

总体思路与原则

- 静态不可变资源（图集、贴图、音频）使用内容指纹命名并设置长缓存（一年+immutable）。
- 动态或入口HTML设置短缓存或no-cache并由CDN进行边缘缓存控制。
- 提供回滚/更新通道（manifest或fallback命名）以便紧急修复。

3.

资源命名规范（实操示例）

- 目录结构推荐：/assets/images/{sprite,ui}/name.[contenthash:8].png。
- 示例：/assets/images/ui/button.9f2a1c3d.png。
- 构建工具：Webpack output 如 filename: 'assets/images/[name].[contenthash:8][ext]'，并生成manifest.json映射原名->哈希名。

4.

构建与发布步骤

- 第一步：在构建脚本中开启文件指纹（Webpack、Rollup或Gulp）。
- 第二步：构建完成后生成manifest.json，前端加载逻辑优先读取manifest或通过构建时注入路径。
- 第三步：将构建产物上传到对象存储（如S3/OSS）并配置为CDN源。

5.

CDN与源站缓存头设置（具体Header示例）

- 不变资源：Cache-Control: public, max-age=31536000, immutable。
- 可变资源（index.html或游戏入口）：Cache-Control: no-cache, must-revalidate 或 max-age=60。
- 对于频繁更新的中间资源可使用：Cache-Control: public, max-age=3600, stale-while-revalidate=60。

6.

在CDN控制台配置的实操步骤

- 绑定源站（OSS/S3或自建服务器），设置默认TTL（建议静态文件默认长期）。
- 为特定路径设定缓存规则，比如 /assets/images/* -> TTL 31536000； /index.html -> TTL 60。
- 启用压缩（gzip、brotli）和HTTP/2以提升传输效率。

7.

上线与回滚流程

- 上线：上传新文件（带指纹）到源站，更新manifest并发布新HTML引用。无需全站清理。
- 紧急回滚：修改manifest指向旧哈希或在源站放回旧文件快速生效。
- 如果必须清理：使用CDN提供的Purge API（示例curl见下）。

8.

Purge API 示例（CDN清理缓存）

- 通用curl示例（以某CDN为例）：curl -X POST "https://api.cdn.com/purge" -H "Authorization: Bearer TOKEN" -d '{"paths":["/assets/images/ui/button.9f2a1c3d.png"]}'.
- 推荐仅清理必要路径，避免大量全域清理导致缓存击穿。

9.

监控与常见问题处理

- 监控CDN命中率、流量和源站请求；命中率低时检查Cache-Control与路径是否一致。
- 遇到旧资源仍被缓存，确认是否使用了CDN边缘规则或浏览器缓存，引导用户清除或降版本策略临时改名。

10.

问：为什么要用contenthash而不是简单版本号？

- 回答：contenthash保证文件内容改变才更新名字，最大化缓存命中并减少发布时需要清理的缓存量；手动版本号容易出错且不能精准区分文件变动。

11.

问：如果图片很大如何兼顾缓存和首屏体验？

- 回答：采用图集/雪碧图、按需加载与低分辨率占位（LoFi）+懒加载；关键小图用短TTL或inline base64，其他大图用长缓存并contenthash。

12.

问：CDN配置出问题导致旧图仍被下发怎么办？

- 回答：排查顺序：1) 检查manifest和引用是否已更新；2) 检查源站是否已上传新文件；3) 查看CDN边缘规则和缓存头；4) 如必须，使用Purge API针对路径清理并观察生效日志。