在Apache中启用css和js文件的缓存 [英] Enable caching of css and js files in Apache
问题描述
在Debian 8.2上使用Apache 2.4，我试图启用所有css和js文件的缓存。缓存图像效果很好;也就是说，浏览器收到304状态，因此不会再次下载。但我无法缓存其他文件。
Using Apache 2.4 on Debian 8.2, I am trying to enable caching of all css and js files. Caching of images works fine; that is, the browser receives a 304 status, so it doesn't download again. But I cannot get caching of other files working.
我在虚拟主机文件中使用它：
I use this inside a virtual host file:
<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
</IfModule>
启用到期模块。我确实重启了apache，清理了浏览器cookie等。没有成功。
The expires module is enabled. I did restart apache, cleaned browser cookies, etc. No success.
来自浏览器开发者工具的gif图像的响应：
The response for a gif image, from browser developer tools:
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
看起来过期标题设置为cor直接，但浏览器不断请求文件（200 OK）。
It looks like the expires heading is set correctly, but the browser keeps requesting the file (200 OK).
我尝试使用Chrome和Firefox。
I tried with Chrome and Firefox.
摘要：
1。）当我按照网站内的链接时，浏览器会使用缓存的文件。但是当我按下F5时，他们会重新下载css和js文件，但是他们不会重新下载图像。图片给出304.没关系。
1.) When I follow links inside the web site, the browser uses the cached files. But when I press F5, they re-download the css and js files, but they don't re-download images. Images give 304. That is fine.
2。）当我按下Ctrl-F5时，自然就会重新下载所有文件。这也很好。
2.) When I press Ctrl-F5, naturally enough, all files are re-downloaded. That's fine too.
3。）所以问题是如何为其他文件启用缓存（就像图像一样）。为什么apache会区分图像和其他文件？我没有对配置文件中的图像添加任何特殊内容。
3.) So the problem is how to enable caching (just like images) for other files. Why is apache discriminating between images and other files? I didn't put anything special to images in the config files.
问：如何正确启用css和js文件的缓存？
Q: How to properly enable caching of css and js files?
另一个问题：是否有一个特殊的http标头，表示浏览器永远不会请求该文件。原因是，甚至发送检查文件是否被修改的请求需要100-200毫秒，这太多了。我确信这些文件不会被修改。如果它们被修改，我可以轻松地在css文件的末尾添加一个版本字符串，例如myFile.css？v = 1.1所以我希望有一种方法可以完全停止发送请求。
Another Q: is there a special http header that says to the browser never to request the file. The reason is, sending even a request to check if the file is modified takes 100-200 ms, which is too much. I am sure the files will not be modified. And if they are modified, I can easily put a version string at the end of the css file, such as myFile.css?v=1.1 So I hope there should be a way to stop sending requests completely.
已解决
首先，apache中有一个错误，如下面的答案中所述。
First, there is a bug in apache as mentioned in the answer below.
其次，我有一个误解。我想这就是现代浏览器的工作方式：
Second, there was a misunderstanding on my part. I guess this is how modern browsers work:
1。）关注网站内的链接：没有请求被发送，甚至检查文件是否被修改。
1.) Follow links inside a web site: No request is sent, even to check if the file has been modified.
2。）F5：发送请求。如果文件未被修改，则服务器响应304。
2.) F5: Send a request. If file is not modified then the server responds 304.
3.）Ctrl + F5：完全下载。
3.) Ctrl+F5: Full download.
关于F5的行为对我来说没有意义。无论如何。
The behavior about F5 does not make sense to me. Anyway.
如果有人需要它，这里是我放入虚拟主机文件的工作解决方案：
In case anybody needs it, here is a working solution that I put into virtual host file:
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>
推荐答案
关掉Etags，他们打得不好当gzip开启304s时Apache。
Turn off Etags, they don't play well in Apache when gzip is on for 304s.
请看这里： Apache没有发送304响应（如果启用了mod_deflate和AddOutputFilterByType）
由于图像已经被压缩，因此它们通常不会被压缩，因此它们可以正常工作。
As images are already compressed they are typically not gzipped and hence why they work.
在我看来，ETag在当前的实现中没有那么有用（参见我的博客此处，以便进行更深入的讨论。为什么）所以，加上上面的bug，我把它关掉。
ETags are not that useful in my opinion in their current implementation (see my blog here for a more in depth discussion as to why) so, coupled with above bug, I turn them off.
对于你的第二个问题，只需设置一个长期到期。
For your second question just set a long expiry.
正如以下评论中所讨论的，有三种情况：
As discussed in the comments below there are three scenarios:
-
正常浏览 - 应使用缓存，仅在缓存在到期后仍然有效时才使用304（在这种情况下，它会在相同的到期时再次设置为有效）。
Normal browsing - in which caching should be used and 304s only used if cache is still valid after expiry (in which case it's set to valid again for same expiry).
F5或刷新按钮。这是用户确认页面及其所有资源仍然有效的明确操作，因此它们都将被双重检查（即使那些仍在缓存中并且仍然根据expiries标头有效）和304s在未更改时发送。它并不意味着只是重新下载已经过期的任何内容，但只保留缓存项目，因为它们仍然有效，您认为应该如此。我个人认为浏览器使用的当前实现是有道理的，你的方法会让最终用户感到困惑。虽然有些网站可能会对图片，CSS和JavaScript等资产进行版本设置，因此重新检查会浪费时间，但并非所有此类网站都会这样做。
F5 or Refresh button. This is an explicit action by the user to confirm the page and all its resources are still valid so they all will be double checked (even those still in cache and still valid according to expiries header) and 304s sent when they haven't changed. It does not mean "just redownload anything which has expired but leave cached items alone as they are still valid" as you think it should. Personally I think the current implementation the browsers use makes sense and your method would be confusing to end users. While some sites may version assets like images, css and JavaScript so rechecking is a waste of time, not all such sites do this.
Ctrl + F5。这是一次强制刷新。它的意思是忽略缓存并下载所有内容。除了更改开发服务器上请求的文件的开发人员之外，很少需要它。
Ctrl+F5. This is a force refresh. It means "Ignore cache and download everything". It's rarely needed except by developers who change files requested on development servers.
希望一切都有意义。
编辑2016年5月12日：看起来Firefox正在引入您真正想要的功能： https://bitsup.blogspot.ie/2016/05/cache-control-immutable.html?m=1
Edit 12 May 2016: Looks like Firefox is bringing in the functionality you actually want: https://bitsup.blogspot.ie/2016/05/cache-control-immutable.html?m=1
这篇关于在Apache中启用css和js文件的缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
