Vercel 的缓存控制，你注意过吗？
💡
原文中文，约3000字，阅读约需8分钟。
📝
内容提要
Vercel 默认缓存配置不合理，导致页面加载延迟。通过调整缓存控制设置，可以将 HTML 文件在 CDN 缓存10分钟，从而减少回源验证，提高加载速度。合理的缓存控制对性能提升至关重要。
🎯
关键要点
- Vercel 默认的缓存配置不合理，导致页面加载延迟。
- 通过调整缓存控制设置，可以将 HTML 文件在 CDN 缓存10分钟，减少回源验证。
- 合理的缓存控制对性能提升至关重要。
- Vercel 默认的缓存控制头设置为 max-age=0，导致每次请求都需回源验证。
- 调整缓存控制设置后，HTML 文件请求流程可直接从 CDN 缓存中获取，减少延迟。
- 在 vercel.json 文件中配置缓存控制，可以优化静态资源和 HTML 文件的缓存策略。
- Vercel 的架构接近于全球多区域存储 + CDN 边缘缓存，合理的缓存控制仍然重要。
❓
延伸问答
Vercel 默认的缓存配置有什么问题？
Vercel 默认的缓存配置设置为 max-age=0，导致每次请求都需回源验证，从而增加了页面加载延迟。
如何优化 Vercel 的缓存控制设置？
可以在项目根目录下创建 vercel.json 文件，设置 HTML 文件的缓存时间为 max-age=0, s-maxage=600，以便 CDN 缓存 10 分钟。
合理的缓存控制对网站性能有什么影响？
合理的缓存控制可以减少回源验证，提高页面加载速度，从而显著提升网站性能。
Vercel 的缓存控制头具体包含哪些设置？
Vercel 默认的缓存控制头为 cache-control: public, max-age=0, must-revalidate，意味着响应立即过期并需回源验证。
为什么 Vercel 的默认配置会导致加载延迟？
因为默认配置要求每次请求都进行回源验证，导致额外的延迟，无法直接从 CDN 缓存中获取内容。
如何在 Vercel 中配置静态资源的缓存策略？
可以在 vercel.json 文件中为静态资源设置较长的缓存时间，例如 CSS 和 JS 文件设置为 max-age=31536000, immutable。
➡️
