如何正确设置 css/js 静态缓存

Question

为了防止出现问题，当我更新 CSS/JS 媒体文件并且浏览器不请求新版本时，因为它们缓存了这些文件，我使用了这个解决方案：https://github.com/jaddison/django-cachebuster，将 ? 添加到 CSS/JS 文件名（将 /media/main.css 替换为 /media/main.css?20012931203128。我认为它会在时间戳更改（文件已更新）时强制浏览器重新加载 css 文件，并在其他情况下使用本地缓存版本。但我所看到的在 Apache 日志中（以及在 firebug 中）是浏览器（至少是 Firefox）为页面的每次重新加载请求 CSS/JS 文件，即使在获得 304 代码之后，请参阅日志中的片段：

XXX.255.115.60 - - [24/Jul/2011:04:17:25 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:26 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:34 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:35 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:44 -0700] "GET /media/main.css?333900240611 HTTP/1.1" 304 172 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"
XXX.255.115.60 - - [24/Jul/2011:04:17:44 -0700] "GET /media/main.js?270101180511 HTTP/1.1" 304 173 "" "Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"

当然，这会使我的网站变慢。是否可以仅在 .css?... 之后的时间戳更改时强制浏览器更新文件？ 谢谢！

更新： 以下是响应和请求的示例：

请求

User-Agent  Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.18) Gecko/20110614 Firefox/3.6.18
Accept  text/css,*/*;q=0.1
Accept-Language en-gb,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  115
Referer 
DNT 1
Connection  keep-alive
If-Modified-Since   Fri, 24 Jun 2011 05:39:33 GMT
If-None-Match   "8ed02f1-a21-4a66ea04f2f40"

回应

Date    Sun, 24 Jul 2011 12:28:21 GMT
Server  Apache
Connection  Keep-Alive
Keep-Alive  timeout=2, max=99
Etag    "8ed02f1-a21-4a66ea04f2f40"

初始响应

Date    Sun, 24 Jul 2011 12:51:05 GMT
Server  Apache
Last-Modified   Fri, 24 Jun 2011 05:39:33 GMT
Etag    "8ed02f1-a21-4a66ea04f2f40"
Accept-Ranges   bytes
Content-Length  2593
Keep-Alive  timeout=2, max=99
Connection  Keep-Alive
Content-Type    text/css

Answer 1

您应该使用正确的HTTP caching 指令来做出响应never expire（未来一年）：

Cache-Control: max-age=31536000
Expires: Sun, 24 Jul 2012 12:51:05 GMT

您可以在 Apache 中使用mod_expires：

ExpiresByType text/css "now plus 1 year"
ExpiresByType text/javascript "now plus 1 year"

Answer 2

我玩了很多次，发现它可能是由 Apache bug 引起的。这不是浏览器的问题——一旦timesatmp 在查询字符串中，浏览器就不能理解查询字符串并且必须至少询问服务器它是否没有改变。 Apache 以“304 Not modified”响应良好，但它也总是发送文件！

我做了很多实验，唯一有效的解决方案是将时间戳直接放在文件名中。在 PHP 中，我使用以下函数：

function safe_inline_url($file)
{

     $basename = basename($file);
     if (strstr($basename, '.'))
          return dirname($file) . "/" .
               preg_replace('/(\.[^\.]*)$/', '_ts_' . filemtime($file) . '\1',
                    $basename);
     else 
          return $file . '_ts_' . filemtime($file);

}

它修改任何内联 URL（css、js、图像、...），以便添加时间戳，例如。比如 js/forms.js => js/forms_ts_1278080148.js .

在服务器上，您必须将修改后的文件名重写回真实名称，这是通过将其放入您的 .htaccess 文件来完成的：

RewriteEngine On

RewriteCond %{REQUEST_URI}      ^(.*)_ts_[0-9]{9,}$
RewriteRule ^                   %1      [PT]

RewriteCond %{REQUEST_URI}      ^(.*)_ts_[0-9]{9,}\.(.*)$
RewriteRule ^                   %1.%2   [PT]

你把它放到根目录，你还必须把它放到每个子目录的 .htaccess 中，并开启 RewriteEngine。

唯一的问题是 scriptaculous javascript 库使用 URL 来包含其他来源 - 你不能使用这个技巧来包含他们的 js 文件。