caching - 客户端文件缓存

Question

如果我理解正确，浏览器会根据文件名缓存图像、JS 文件等。因此存在一种危险，如果更新了一个这样的文件(在服务器上)，浏览器将使用缓存的副本。

此问题的解决方法是重命名所有文件(作为构建的一部分)，以便文件名包含其内容的 MD5 哈希，例如

foo.js -> foo_AS577688BC87654.js
me.png -> me_32126A88BC3456BB.png

但是，除了重命名文件本身之外，还必须更改对这些文件的所有引用。例如，诸如 <img src="me.png"/> 之类的标记应更改为 <img src="me_32126A88BC3456BB.png"/> 。

显然，这会变得非常复杂，尤其是当您考虑到这些文件的引用可能会在服务器端代码中动态创建时。

当然，一种解决方案是使用 HTTP header 完全禁用浏览器上的缓存(以及服务器和浏览器之间的任何缓存)。但是，没有缓存会产生它自己的一系列问题。

有更好的解决方案吗？

谢谢，
大学教师

Answer 1

最好的解决方案似乎是通过附加上次修改时间来版本化文件名。

您可以这样做:在您的 Apache 配置中添加重写规则，如下所示:

RewriteRule ^(.+)\.(.+)\.(js|css|jpg|png|gif)$ $1.$3

这会将任何“版本化”URL 重定向到“普通”URL。这个想法是让你的文件名保持不变，但要从缓存中受益。对于某些不缓存带参数的 URL 的代理，将参数附加到 URL 的解决方案不是最佳的。

然后，而不是写:

<img src="image.png" />

只需调用一个 PHP 函数:

<img src="<?php versionFile('image.png'); ?>" />

versionFile() 看起来像这样:

function versionFile($file){
    $path = pathinfo($file);
    $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$file).'.';
    echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}

就是这样!浏览器会询问 image.123456789.png，Apache 会将其重定向到 image.png，因此您将在所有情况下都受益于缓存，并且不会出现任何过时的问题，而不必担心文件名版本控制.

您可以在此处查看此技术的详细说明: http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/