如何在 .htaccess 中為 CDN 添加杠桿瀏覽器緩存？

Question

我的.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 級。

Answer 1

如果您想對 CDN 使用 Leverage 瀏覽器緩存，最好通過添加一些緩存標頭（如 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 #

Answer 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創建的那些）。 您最終會得到一個如下所示的代碼片段：

<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），可加快您的網站性能。

筆記

1. 確保在您的 Apache Web 服務器上啟用了mod_rewrite ，如果沒有，請聯系您的 Web 服務器技術團隊以啟用它，因為完成緩存操作需要重寫模塊。
2. 警告！ 如果您為某物設置了一個很遠的未來到期日期，然后更新其中一個文件，則必須更改該文件的名稱，以便瀏覽器重新獲取它。
   示例：如果您將 javascript 設置為 1 年，並且更新了一個 javascript 文件，則必須重命名實際文件。 一個很好的方法是通過版本控制，即 myfile_v1.2.js，但更簡單的方法是小心你的 Expires 標頭（將某些東西設置為 10 年從來不是一個好的選擇 IMO）。

您是否注意到您的網站有任何改進？ 以上是否處理了“利用瀏覽器緩存”和“添加過期標頭”下列出的所有文件？ 請在下面的評論中告訴我。

Answer 3

在您的主機上緩存 CDN 文件可能不是最好的主意。 如果您可以利用 CDN 主機，那么最好通過添加一些緩存標頭（如Cache-Control 、 Expires 、 Last-Modified等）來緩存文件。

這更好，因為您只需將緩存標頭添加到一個地方 - 您的 CDN，而不是向使用您的 CDN 的每個站點添加緩存規則。

Answer 4

我通過以下步驟解決了這個問題：首先檢查我的 apache 站點配置並確保“AllowOverride all”如下所示。

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

然后嘗試了以下命令：

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