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

我的

.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"

在

JS、CSS和其他方面也存在同样的问题

---

我需要在

.htaccess

中添加的内容主要是在这方面取得成绩。

可能，在主机上缓存CDN文件不是最好的办法。如果您可以利用CDN主机，那么最好通过添加一些缓存头（如缓存控制、过期、上次修改等）将文件缓存到CDN主机

---

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

如果您想利用浏览器缓存进行CDN，最好通过添加一些缓存头（如cache Control、Expires和Last Modified）来缓存文件

使用Mod_头利用浏览器缓存

如果您在共享服务器上，并且您的主机不会启用Mod_Expires，那么您仍然可以使用Mod_头来利用浏览器缓存，这将是可用的

# 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 #

您使用了以下代码：

使用Mod_的浏览器缓存过期
利用浏览器缓存的最常见方法是使用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 #

#使用mod#u expires利用浏览器缓存#
过期于
过期按类型映像/jpg“访问加1年”
过期按类型图像/jpeg“访问加1年”
ExpiresByType image/gif“访问加1年”
过期按类型图像/png“访问加1年”
ExpiresByType文本/css“访问加1个月”
过期按类型应用程序/pdf“访问加1个月”
ExpiresByType text/x-javascript“访问加1个月”
过期按类型应用程序/x-shockwave-flash“访问加1个月”
过期按类型图像/x图标“访问加1年”
ExpiresDefault“访问加2天”
#使用mod_过期的浏览器缓存结束#

什么是浏览器缓存？

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

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

缓存控制
缓存控制允许我们对浏览器缓存进行更多的控制，许多人发现一旦设置好，使用起来就更容易了

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

为默认到期日添加“默认指令””可能会很有用，因此现在将添加两行：

#启用过期
过期于
#默认指令
ExpiresDefault“访问加1个月”

那是基地。现在为您的每种文件类型添加所有行（您知道，您之前为您的favicon、图像、CSS和Javascript创建的行）。您将得到如下代码片段：

#启用过期
过期于
#默认指令
ExpiresDefault“访问加1个月”
#我的favicon
过期按类型图像/x图标“访问加1年”
#图像
ExpiresByType image/gif“访问加1个月”
ExpiresByType图像/png“访问加1个月”
ExpiresByType图像/jpg“访问加1个月”
过期按类型图像/jpeg“访问加1个月”
#CSS
ExpiresByType文本/css“访问1个月”
#Javascript
ExpiresByType应用程序/javascript“访问加1年”

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

建议

• 对所有静态资源进行积极的缓存
• 有效期至少为一个月（建议：使用期限加1年）
• 不要提前一年以上设置缓存

使用WordPress插件的浏览器缓存

最好的缓存插件之一，具有缓存、CDN集成（如MaxCDN）等多项功能，可提高网站性能

注意

确保在Apache web服务器上启用了

mod_rewrite

， 如果没有，请联系您的web服务器技术团队以启用它，因为完成缓存操作需要重写模块

警告如果您为某个文件设置了一个遥远的过期日期，然后更新其中一个文件，则必须更改该文件的名称 让浏览器重新获取它。
示例：如果将javascript设置为1年，并更新其中一个javascript文件，则必须重命名实际文件。 实现这一点的一个好方法是通过版本控制，即myfile_v1.2.js，但是 更简单的方法是小心使用Expires头（设置 10年的时间永远不是一个好的选择

---

你注意到你的网站有什么改进吗？上述文件是否处理了“利用浏览器缓存”和“添加过期标题”下列出的所有文件？请在下面的评论中告诉我。

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

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

这些是外部文件

# 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 #

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

<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>

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

</IfModule>

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On 

# Default directive
ExpiresDefault "access plus 1 month"

</IfModule>

<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>

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

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