javascript - 强制浏览器只缓存图像(不缓存脚本和链接)

Question

我维护一个网站，该网站会定期接收更新和样式更改。在这些更改之后，我的客户经常会抗议我以某种方式“破坏”了他们的网站，纯粹是因为他们的浏览器缓存了旧的 CSS 样式表和/或脚本，有时甚至在刷新后也是如此。

这个问题 ( How to control web page caching, across all browsers? ) 解释了我如何使用我掌握的任何技术来解决这个问题，但我不想要一个全面的无缓存解决方案，我希望浏览器能够维护图像 -尤其是那些很少改变的较大的。

这有可能使用 PHP、HTML 甚至 JavaScript 吗？

叫我 OCD，但我不想在每次内容发生变化时都修改文件名(尽管我愿意求助于此)，我正在寻找一种控制机制(如果存在的话)。

我知道这可以通过 Apache Expires 模块实现(如此处解释:Website image caching with Apache)，但我的客户使用的托管帐户似乎没有授予我执行此操作的权限，老实说，我是远非 Apache 专家。

Answer 1

如果您无权访问 Apache 配置本身，您可以尝试通过 .htaccess 文件设置过期规则。与流行的看法相反，不仅重写规则，而且任何 Apache 配置规则都可以包含在那里……如果 Apache 配置允许的话。但是，值得一试。

要只缓存某些文件，您可以使用如下指令:

<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
  Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

(您可以删除不想缓存的扩展，然后添加其他扩展。)

现在，对于 CSS 和 JS，通常建议执行以下操作:与其更改文件名本身，不如通过向它们添加(无意义的)查询字符串来更改对这些文件的引用。

比如嵌入一个JS文件时，可以这样:

<script src="/path/to/file.js?rev=123" type="text/javascript"></script>

下次更新该文件时，只需增加 rev 编号即可。