【问题标题】:Enable caching of css and js files in Apache在 Apache 中启用 css 和 js 文件的缓存
【发布时间】:2016-02-28 20:41:43
【问题描述】:

在 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

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

我尝试使用 Chrome 和 Firefox。

总结:

1.) 当我点击网站内的链接时,浏览器会使用缓存文件。但是当我按F5时,他们重新下载了css和js文件,但他们没有重新下载图像。图像给出 304。这很好。

2.) 当我按下 Ctrl-F5 时,很自然地,所有文件都会重新下载。那也不错。

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

Q:如何正确启用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>

【问题讨论】:

    标签: apache http-headers


    【解决方案1】:

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

    请看这里:Apache is not sending 304 response (if mod_deflate and AddOutputFilterByType is enabled)

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

    在我看来,ETag 在他们当前的实现中并没有那么有用(请参阅我的博客here 以获得更深入的讨论)因此,加上上述错误,我将它们关闭。

    对于您的第二个问题,只需设置一个较长的到期时间。

    正如下面的 cmets 中所讨论的,共有三种情况:

    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

    【讨论】:

    • 为什么只有部分?而且我不知道浏览器使用 HEAD 请求。它们没有多大意义,因为必须跟进一个完整的请求,所以他们只需使用条件 GET 请求并一次性完成所有操作。
    • F5 进行手动刷新以检查是否有任何更新,尽管有缓存 - 所以发送一个有条件的 GET,所以如果文件没有被修改,你会得到一个 304(忽略 Apache 错误)。 CTRL+F5 表示执行完整的 GET - 即使您的缓存中有一个文件并且它仍然有效,所以您永远不应该得到 304。当您认为缓存错误时,CTRL+F5 很有用(例如,您将文件恢复到以前服务器上的版本,所以尽管最后一次修改不是在你仍然想下载它之后)。
    • 如果您知道它不会有所不同,何必再费心去刷新呢? :-) 我猜您正在考虑页面 HTML 可能不同(假设未缓存)但图像不会不同(并且已缓存)的场景,因此您希望它只下载页面 HTML?好吧,这不是它的工作原理——F5 的意思是“检查所有内容以查看需要刷新的内容(如果有的话)”。我想浏览器可以实现一个轻量级版本(例如 Alt-F5)来表示“仅刷新过期资源”,就像您再次浏览到该页面时一样 - 但可能比拥有 3 种刷新类型更令人困惑。
    • 您必须从用户的角度来考虑(因为他们是按下 F5 按钮的人),而不是从服务器端。 F5 是用户说“我不确定此页面是否为最新版本 - 浏览器请再次为我检查”的明确操作。是否设置了过期标题无关紧要 - 用户要求浏览器仔细检查。当检查证明文件仍然是最新的时,304 是确认双重检查的方法,无需支付全部下载费用。这与只浏览何时应适当使用到期标头不同。
    • 顺便修改了我的答案。虽然我理解您的观点,但我仍然认为 F5 的意思是“检查并刷新必要的内容”,您的定义会让普通用户感到困惑。所以是的,对于一个拥有大量不变资产的网站,检查可能需要一些时间,但我认为这是网站有责任更好地编码!请记住,普通浏览器是主要访问者(并且会为此类网站带来影响),而 F5 用户是边缘情况,您可以使之变得简单(始终刷新页面)但速度较慢,或者复杂(仅刷新可能已更改的内容)但速度更快。对于边缘情况,我每次都会简单地获胜。
    【解决方案2】:

    如果似乎没有其他工作,请不要忘记在浏览器中从 devtools 中打开 禁用缓存!!!

    【讨论】:

      猜你喜欢
      • 2011-11-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-25
      • 2011-11-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-13
      相关资源
      最近更新 更多