核心结论：静态资源开启长缓存能显著减少重复请求，但必须配合文件名版本更新策略，否则用户无法看到最新内容。
- 适合：CSS、JS、图片等不频繁变动的静态文件
- 先准备：确认资源发布流程包含文件名哈希或查询参数版本化
- 验收：通过浏览器开发者工具检查响应头中的 Cache-Control 字段
配置步骤
Cloudflare 的浏览器缓存 TTL 主要在 Dashboard 面板配置，无需命令行。进入域名管理页，找到 Caching 下的 Configuration，调整 Browser Cache TTL 选项。若需更精细控制，建议使用 Cache Rules 针对特定文件扩展名设置不同的缓存策略。
- 登录 Cloudflare Dashboard，选择目标域名。
- 在左侧菜单点击 Caching > Configuration。
- 找到 Browser Cache TTL 选项。静态资源通常可设为 2592000 秒（1 个月）或更长，HTML 页面建议设为 0 或 Respect Existing Headers。
- 若需区分静态和动态资源，点击左侧 Caching > Cache Rules，新建规则。表达式建议使用
http.request.uri.path matches ".css$" or http.request.uri.path matches ".js$"，设置 Edge TTL 和 Browser TTL。 - 确保你的构建流程会在文件内容变化时改变文件名（如
style.v1.css变为style.v2.css）或查询参数。
验证方法
使用 curl 命令或浏览器开发者工具检查响应头。在终端执行 curl -I https://yourdomain.com/static/style.css，查看输出中是否包含 cache-control 和 expires，且时间符合预期。在 Chrome 浏览器中，按 F12 打开开发者工具，刷新页面，点击 Network 标签，选中资源文件，查看 Response Headers 中的缓存字段。若显示 from disk cache 或 from memory cache，说明浏览器缓存已命中。
注意事项
第一，HTML 文件缓存过久。如果将 HTML 页面的浏览器缓存设得太长，用户发布新内容后可能无法立即看到更新，建议 HTML 资源遵循源站头设置或设为较短时间。第二，忽略缓存清除机制。修改了文件内容但未修改文件名，用户端仍会加载旧版本，需配合构建工具实现文件名哈希。第三，混淆 Edge TTL 和 Browser TTL。Edge TTL 决定 Cloudflare 节点存多久，Browser TTL 决定用户浏览器存多久，两者需分别配置。
参考文档
- Cloudflare Developer Documentation, "Configure Cache-Control header", https://developers.cloudflare.com/cache/how-to/configure-cache-control-header/
- Cloudflare Developer Documentation, "Cache Rules", https://developers.cloudflare.com/cache/how-to/cache-rules/