我们应该将 HTTP Expires 或 Cache-control: max-age 标头设置多长时间？答案

【问题标题】：How long should we set the HTTP Expires or Cache-control: max-age header?我们应该将 HTTP Expires 或 Cache-control: max-age 标头设置多长时间？
【发布时间】：2020-03-13 09:15:54
【问题描述】：

假设bundle.js 是 750kb，如果您将其设置为“永不过期”或“10 年内到期”，那么浏览器是否不需要获取该文件，因此可以使您的网站和页面加载速度更快？

（顺便说一下Cache-control: max-age是HTTP/1.1和if it and Expires: are both present, Cache-control overrides the Expires header。）

如果您有一个每周或 2 个月的发布周期，您应该将 Expires 标头设置为 1 周还是 2 个月？我在想，如果每周发布周期，您的一些 JavaScript 或 CSS 文件可能会保持不变，所以将其设置为 6 个月甚至 10 年到期可能会更好？（因为一周后它没有改变？）

但是，如果您的文件已更改但浏览器无法获取它怎么办？如果您使用 ETag 机制，或者如果您使用bundle.53ae823.js 或bundle.2020-03-12-08.js，那么您是否可以通过 ETag 不同或文件名不同来“强制”它过期？设置 Expires 标头长度的好方法是什么？

【问题讨论】：

标签： caching http-headers browser-cache web-performance expires-header

【解决方案1】：

您可以同时使用所有这些技术。如果您可以在文件名和对它们的引用中包含哈希 (example of how to do it in webpack)，那么您可以确保在更改某些内容时可以破坏缓存。

然后您可以将Cache-control: max-age 设置为 31536000（一年，最大值），因为您可以相信带有 URI 的文件不会更改（因为哈希，如果文件更改，URI 也会更改）。

当然，您可以实施 ETAG 以启用缓存的重新验证。这仍然需要将请求发送到您的服务器/CDN，但如果文件没有更改，则用户无需下载整个文件。

有一篇关于这个主题的好文章，here。

【讨论】：