如何在 .htaccess 中为 CDN 添加 Leverage 浏览器缓存？

Posted 2023-02-24

【中文标题】如何在 .htaccess 中为 CDN 添加 Leverage 浏览器缓存？

【英文标题】：How to add Leverage browser caching for CDN in .htaccess?

【发布时间】：2017-04-23 09:36:19

【问题描述】：

我的.htaccess中有以下代码

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

在

cdn.domain.com/abc.jpg (expiration not specified)
cdn.domain.com/abc.png (expiration not specified)

同样的问题也适用于 JS、CSS 和其他。

我需要在.htaccess 中输入什么，所以大部分都达到了 A 级。

【问题讨论】：

这些是外部文件，是吗？您需要下载外部.JS、css 以及您拥有的任何其他文件并在本地运行它们。您可以使用cron 来执行此操作。查看我对这个问题的回答：Leverage browser caching for 3rd party JS

HI @thickguru 如何实现不下载文件。因为使用CDN的目的是提高性能。做不到

恐怕你不能。不与外部文件。它仅适用于本地文件。这就是为什么我建议使用cron。

我正在使用 Magento 2 CE。

您的 CDN 提供商是谁？你和他们核实过吗？

【参考方案1】：

如果你想为 CDN 使用浏览器缓存，最好通过添加一些缓存头来缓存文件，例如 Cache-Control、Expires 和 Last-Modified。

使用 Mod_Headers 来利用浏览器缓存

如果您在共享服务器上并且您的主机不会启用 Mod_Expires，您仍然可以通过使用可用的 Mod_headers 来利用浏览器缓存。

# Leverage browser caching using mod_headers #
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
        Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
        Header set Cache-Control "public"
    </FilesMatch>
</IfModule>
# End of Leverage browser caching using mod_headers #

下面的测试示例：

# 1 YEAR
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# 3 HOUR
<FilesMatch "\.(txt|xml|js|css)$">
Header set Cache-Control "max-age=10800"
</FilesMatch>

# NEVER CACHE - notice the extra directives
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
</FilesMatch>

测试标头

您可以通过运行类似以下的“curl”命令来验证文件中是否存在 Cache-Control: max-age 标头：

curl -I http://foo.bar.netdna-cdn.com/file.ext

HTTP/1.1 200 OK
Date: Fri, 16 Sep 2014 14:12:20 GMT
Content-Type: text/css
Connection: keep-alive
Cache-Control: max-age=604800, public  ← 1 Week caching time 
Expires: Thu, 21 May 2015 20:00:00 GMT
Vary: Accept-Encoding
Last-Modified: Thu, 24 Jan 2013 20:00:00 GMT
GMT; path=/; domain=.domain.com
Server: NetDNA-cache/2.2
X-Cache: HIT

您使用过以下代码：

使用 Mod_Expires 进行浏览器缓存 利用浏览器缓存的最常见方法是使用 mod_expires。可以将以下代码添加到您的 .htaccess 中，并自动为所有用户启用浏览器缓存。

# Leverage browser caching using mod_expires #
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 2 days"
</IfModule>
# End of Leverage browser caching using mod_expires #

【讨论】：

@Keshar 我应该在哪里写这些 mode_headers？阿帕奇配置文件？ ，我是初学者，请帮忙。

【参考方案2】：

什么是浏览器缓存？

浏览器缓存是将先前请求的文件存储在浏览器的本地缓存中的过程，以帮助减少加载时间。文件存储在本地后，向服务器发送的请求更少，下载的数据也更少。

为了正确利用浏览器缓存，必须启用某些组件。例如，您必须确保指定一个缓存验证器来帮助浏览器确定是否仍可以从本地缓存中检索文件，或者是否必须向服务器发出请求。此外，您必须为资产正确设置 Expires 或 Cache-Control 标头。两者都使用是多余的。此外，Gtmetrix 更喜欢 Expires 而不是 Cache-Control，因为它得到了更广泛的支持。因此，本文将重点介绍在演示如何利用浏览器缓存时使用 Expires 标头。

缓存控制 Cache-Control 允许我们对浏览器缓存有更多的控制，许多人发现一旦设置它就更容易使用。

# 1 Year for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

Gzip 压缩（对 Magento 有用）

<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>

根据您网站的文件，您可以设置不同的到期时间。 如果某些类型的文件更新得更频繁，您可以为它们设置更早的到期时间（即 CSS 文件） .

打开你的 .htaccess 文件。（聪明点：复制你原来的 .htaccess 文件，以防你不小心犯了一个错误而需要恢复）。

现在是时候在 Apache 中启用 Expires 标头模块了（将“ExpiresActive”设置为“On”），因此请将其添加到您的 .htaccess 文件中：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

</IfModule>

为默认到期日期添加“默认指令”可能会很有用，这就是您现在要添加的 2 行：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

# Default directive
ExpiresDefault "access plus 1 month"

</IfModule>

这就是基础。现在为您的每个文件类型添加所有行（您知道，您之前为 favicon、images、CSS 和 Javascript）。你最终会得到一个看起来像这样的代码 sn-p：

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault "access plus 1 month"

# My favicon
ExpiresByType image/x-icon "access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"

# CSS
ExpiresByType text/css "access 1 month”

# Javascript
ExpiresByType application/javascript "access plus 1 year"

</IfModule>

现在用 GTmetrix 运行另一个测试并比较结果。这是我的测试站点在实现 Expires 标头后的结果：

建议

积极缓存所有静态资源 至少 1 个月到期（推荐：访问权限加 1 年） 不要提前一年以上设置缓存！

使用 WordPress 插件的浏览器缓存

W3 Total Cache: 最好的缓存插件之一，具有许多功能，如缓存、CDN 集成（如 MaxCDN），可提高您的网站性能。

注意

确保在您的 Apache Web 服务器上启用了 mod_rewrite， 如果没有，请联系您的 Web 服务器技术团队以启用它，因为完成缓存操作需要重写模块 . 警告！如果您为某项设置了一个遥远的未来到期日期，然后更新其中一个文件，则必须更改文件的名称 以便浏览器重新获取它。示例：如果您将 javascript 设置为 1 年，并且您更新了一个 javascript 文件，则必须重命名实际文件。 一个很好的方法是通过版本控制，即 myfile_v1.2.js，但是 更简单的方法是小心你的 Expires 标头（设置 10 年的东西从来都不是 IMO 的好选择）。

您是否注意到您的网站有任何改进？以上是否处理了“利用浏览器缓存”和“添加过期标头”下列出的所有文件？请在下面的 cmets 中告诉我。

【讨论】：

不客气！！！，您可以从这里进一步优化它***.com/documentation/magento/8010/…

【参考方案3】：

在您的主机上缓存 CDN 文件可能不是最好的主意。如果您可以利用您的 CDN 主机，最好通过添加一些缓存标头（例如 Cache-Control、Expires、Last-Modified 来缓存文件> 等等。

这更好，因为您只需将缓存标头添加到一个位置 - 您的 CDN，而不是向使用您的 CDN 的每个站点添加缓存规则。

【参考方案4】：

我通过以下步骤解决了这个问题： 首先检查我的 apache 站点配置，并确保出现“AllowOverride all”，如下所示。

<Directory /var/www/mysite>
    AllowOverride all
</Directory>

然后尝试了以下命令：

sudo a2enmod rewrite
sudo a2enmod headers 
sudo a2enmod expires
sudo service apache2 restart