在Apache中启用css和js文件的缓存

Question

在Debian 8.2上使用Apache 2.4,我试图启用所有css和js文件的缓存.缓存图像效果很好; 也就是说,浏览器收到304状态,因此不会再次下载.但我无法缓存其他文件.

我在虚拟主机文件中使用它:

<IfModule mod_expires.c>
    <FilesMatch "\.(jpe?g|png|gif|js|css)$">
        ExpiresActive On
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>

该expires模块已启用.我确实重启了apache,清理了浏览器cookie等.没有成功.

来自浏览器开发人员工具的gif图像响应:

Cache-Control:max-age=604800
Connection:Keep-Alive
Date:Wed, 25 Nov 2015 21:37:50 GMT
ETag:"4174a-4e69c97fbf080"
Expires:Wed, 02 Dec 2015 21:37:50 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.10 (Debian)

css文件的响应:

Accept-Ranges:bytes
Cache-Control:max-age=604800
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:135
Content-Type:text/css
Date:Wed, 25 Nov 2015 21:37:50 GMT
ETag:"5116-525639d271c78-gzip"
Expires:Wed, 02 Dec 2015 21:37:50 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Wed, 25 Nov 2015 20:50:52 GMT
Server:Apache/2.4.10 (Debian)
Vary:Accept-Encoding

看起来expires标题设置正确,但浏览器一直在请求文件(200 OK).

我试过Chrome和Firefox.

摘要:

1.)当我按照网站内的链接时,浏览器使用缓存的文件.但是当我按F5时,他们会重新下载css和js文件,但是他们不会重新下载图像.图像给304.那很好.

2.)当我按下Ctrl-F5时,自然就会重新下载所有文件.那也没关系.

3.)所以问题是如何为其他文件启用缓存(就像图像一样).为什么apache会区分图像和其他文件？我没有在配置文件中为图像添加任何特殊内容.

问:如何正确启用css和js文件的缓存？

另一个问题:是否有一个特殊的http标头,表示浏览器永远不会请求该文件.原因是,甚至发送检查文件是否被修改的请求需要100-200毫秒,这太多了.我确信文件不会被修改.如果它们被修改,我可以很容易地在css文件的末尾添加一个版本字符串,例如myFile.css？v = 1.1所以我希望有一种方法可以完全停止发送请求.

解决了

首先,如下面的答案中提到的apache中有一个错误.

其次,我有一个误解.我想这就是现代浏览器的工作原理:

1.)关注网站内的链接:不发送任何请求,甚至检查文件是否已被修改.

2.)F5:发送请求.如果未修改文件,则服务器响应304.

3.)Ctrl + F5:完全下载.

关于F5的行为对我来说没有意义.无论如何.

如果有人需要它,这是我放入虚拟主机文件的工作解决方案:

RequestHeader  edit "If-None-Match" "^\"(.*)-gzip\"$" "\"$1\""
Header  edit "ETag" "^\"(.*[^g][^z][^i][^p])\"$" "\"$1-gzip\""

LoadModule expires_module /usr/lib/apache2/modules/mod_expires.so
ExpiresActive On

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    ExpiresDefault "access plus 4 weeks"
</FilesMatch>

Answer 1

关闭 Etags，当 gzip 打开 304 秒时，它们在 Apache 中无法正常运行。

请参阅此处：Apache 未发送 304 响应（如果启用了 mod_deflate 和 AddOutputFilterByType）

由于图像已经被压缩，因此它们通常不会被压缩，这就是它们工作的原因。

在我看来，ETag 在当前的实现中并没有那么有用（请参阅我的博客，了解其原因的更深入讨论），因此，加上上述错误，我将其关闭。

对于你的第二个问题，只需设置一个较长的有效期。

正如下面评论中所讨论的，存在三种情况：

1. 正常浏览 - 应使用缓存，并且仅当缓存在过期后仍然有效时才使用 304（在这种情况下，它会在同一过期后再次设置为有效）。

2. F5 或刷新按钮。这是用户确认页面及其所有资源仍然有效的显式操作，因此它们都将被双重检查（即使那些仍然在缓存中并且根据过期标头仍然有效），并且在它们没有更改时发送 304。它并不意味着“只需重新下载已过期的任何内容，但保留缓存的项目，因为它们仍然有效”，正如您所认为的那样。就我个人而言，我认为浏览器使用的当前实现是有意义的，您的方法会让最终用户感到困惑。虽然有些网站可能会对图像、CSS 和 JavaScript 等资源进行版本控制，因此重新检查是浪费时间，但并非所有此类网站都会这样做。

3. Ctrl+F5。这是强制刷新。这意味着“忽略缓存并下载所有内容”。除了更改开发服务器上请求的文件的开发人员之外，很少需要它。

希望一切都有意义。

2016 年 5 月 12 日编辑：看起来 Firefox 正在引入您真正想要的功能： https: //bitsup.blogspot.ie/2016/05/cache-control-immutable.html ?m=1