如何在 .htaccess 中为 CDN 添加杠杆浏览器缓存？
How to add Leverage browser caching for CDN in .htaccess?
我的 .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 等级。
在您的主机上缓存 CDN 文件可能不是最好的主意。如果您可以利用 CDN 主机，那么最好通过添加一些缓存 headers 来缓存文件，例如 Cache-Control、Expires、Last-Modified等。
更好，因为您只需将缓存 headers 添加到一个地方 - 您的 CDN，而不是将缓存规则添加到使用您的 CDN 的每个站点。
如果您想为 CDN 使用杠杆浏览器缓存，最好通过添加一些缓存 header 来缓存文件，例如 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>
测试 Headers
您可以通过 运行 一个“curl”命令来验证 Cache-Control: max-age header 是否在您的文件中，例如：
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 #
什么是浏览器缓存？
浏览器缓存是将以前请求的文件存储在浏览器的本地缓存中以帮助减少加载时间的过程。将文件存储在本地后，需要向服务器发送的请求和下载的数据就会减少。
必须启用某些组件才能正确利用浏览器缓存。例如，您必须确保指定一个缓存验证器，以帮助浏览器确定是否仍可以从本地缓存中检索文件，或者是否必须向服务器发出请求。此外，您必须为您的资产正确设置 Expires 或 Cache-Control headers。两者都使用是多余的。此外，Gtmetrix 更喜欢 Expires 而不是 Cache-Control 因为它得到更广泛的支持。因此，本文将在演示如何利用浏览器缓存时重点介绍 Expires headers。
Cache-Control
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 headers 模块（将“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）。您最终会得到如下所示的代码片段：
<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 headers:
之后
建议
- 对所有静态资源积极缓存
- 至少一个月到期（建议：访问加 1 年）
- 不要提前一年以上设置缓存！
使用 WordPress 插件的浏览器缓存
W3 Total Cache:
最好的缓存插件之一，具有缓存、CDN 集成（如 MaxCDN）等许多功能，可加快您的网站性能。
备注
- 确保在您的 Apache Web 服务器上启用了
mod_rewrite，
如果没有，请联系您的 Web 服务器技术团队以启用它，因为完成缓存操作需要重写模块
.
- 警告！ 如果您为某个东西设置了一个遥远的未来到期日期，然后更新其中一个文件，您必须更改文件的名称
对于浏览器re-fetch吧。
示例：如果您将 javascript 设置为 1 年，并且更新其中一个 javascript 文件，则必须重命名实际文件。
一个很好的方法是通过版本控制，即 myfile_v1.2.js，但是
更简单的方法是小心你的 Expires headers （设置
IMO 到 10 年从来都不是一个好的选择。
您是否注意到您的网站有任何改进？以上是否处理了“利用浏览器缓存”和“Add Expires headers”下列出的所有文件？ 让我知道在下面的评论中。
我通过以下步骤解决了这个问题：
首先检查我的 apache 站点配置并确保 "AllowOverride all" 如下所示。
<Directory /var/www/mysite>
AllowOverride all
</Directory>
然后尝试了以下命令：
sudo a2enmod rewrite
sudo a2enmod headers
sudo a2enmod expires
sudo service apache2 restart
我的 .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 等级。
在您的主机上缓存 CDN 文件可能不是最好的主意。如果您可以利用 CDN 主机，那么最好通过添加一些缓存 headers 来缓存文件，例如 Cache-Control、Expires、Last-Modified等。
更好，因为您只需将缓存 headers 添加到一个地方 - 您的 CDN，而不是将缓存规则添加到使用您的 CDN 的每个站点。
如果您想为 CDN 使用杠杆浏览器缓存，最好通过添加一些缓存 header 来缓存文件，例如 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>
测试 Headers
您可以通过 运行 一个“curl”命令来验证 Cache-Control: max-age header 是否在您的文件中，例如：
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 #
什么是浏览器缓存？
浏览器缓存是将以前请求的文件存储在浏览器的本地缓存中以帮助减少加载时间的过程。将文件存储在本地后，需要向服务器发送的请求和下载的数据就会减少。
必须启用某些组件才能正确利用浏览器缓存。例如，您必须确保指定一个缓存验证器，以帮助浏览器确定是否仍可以从本地缓存中检索文件，或者是否必须向服务器发出请求。此外，您必须为您的资产正确设置 Expires 或 Cache-Control headers。两者都使用是多余的。此外，Gtmetrix 更喜欢 Expires 而不是 Cache-Control 因为它得到更广泛的支持。因此，本文将在演示如何利用浏览器缓存时重点介绍 Expires headers。
Cache-Control
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 headers 模块（将“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）。您最终会得到如下所示的代码片段：
<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 headers:
之后建议
- 对所有静态资源积极缓存
- 至少一个月到期（建议：访问加 1 年）
- 不要提前一年以上设置缓存！
使用 WordPress 插件的浏览器缓存
W3 Total Cache: 最好的缓存插件之一，具有缓存、CDN 集成（如 MaxCDN）等许多功能，可加快您的网站性能。
备注
- 确保在您的 Apache Web 服务器上启用了
mod_rewrite， 如果没有，请联系您的 Web 服务器技术团队以启用它，因为完成缓存操作需要重写模块 . - 警告！ 如果您为某个东西设置了一个遥远的未来到期日期，然后更新其中一个文件，您必须更改文件的名称
对于浏览器re-fetch吧。
示例：如果您将 javascript 设置为 1 年，并且更新其中一个 javascript 文件，则必须重命名实际文件。 一个很好的方法是通过版本控制，即 myfile_v1.2.js，但是 更简单的方法是小心你的 Expires headers （设置 IMO 到 10 年从来都不是一个好的选择。
您是否注意到您的网站有任何改进？以上是否处理了“利用浏览器缓存”和“Add Expires headers”下列出的所有文件？ 让我知道在下面的评论中。
我通过以下步骤解决了这个问题： 首先检查我的 apache 站点配置并确保 "AllowOverride all" 如下所示。
<Directory /var/www/mysite>
AllowOverride all
</Directory>
然后尝试了以下命令：
sudo a2enmod rewrite
sudo a2enmod headers
sudo a2enmod expires
sudo service apache2 restart