共計 1977 個字符,預計需要花費 5 分鐘才能閱讀完成。
如何在 Nginx 與 Apache 設置靜態資源緩存教程? 通常網站由動態和靜態兩種資源構成,其動態資源一般為 PHP、ASP、ASP.net、JAVA 等程序,而靜態資源一般是圖片、樣式文件 (CSS)、JS 代碼文件等。由于靜態資源在一般情況下是很少變更的,所以在 WEB 服務器中可以通過設置客戶端的緩存時間來達到節省網絡帶寬及提高效率的目的。一般來說,圖片文件、CSS 樣式文件、JS 代碼文件推薦設置的緩存時間可以為一年,這也是 PageSpeed Insights 推薦的。
Nginx 設置靜態資源緩存的方法
Nginx 虛擬主機配置文件中的 Server 塊中添加以下代碼:
location ~ .*/.(gif|jpg|jpeg|png|bmp|swf|WebP)$
{
expires 365d;
error_log /dev/null;
access_log off;
}
location ~ .*/.(js|css)?$
{
expires 365d;
error_log /dev/null;
access_log off;
}
注意,以上代碼需插入在 Server 塊中,也就是 server{…….} 的 } 之前。
expires 365d; 的意思就是將該類型的文件緩存時間設置為 365 天,expires 的具體語法如下:
expires 60s; #緩存 60 秒
expires 10m; #緩存 10 分鐘
expires 12h; #緩存 12 小時
expires 30d; #緩存 30 天
設置完成后,重啟 Nginx 即生效。
Apache 設置靜態資源緩存
Apache 設置緩存之前,需先開啟 LoadModule expires_module modules/mod_expires.so 模塊,編輯 Apache 的”httpd.conf”,找到這么一行:
#LoadModule expires_module modules/mod_expires.so
將該行前面的”#”字號刪除,保存,重新啟動 Apache 生效。
然后在主機配置文件中加入以下代碼 (示例):
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/css “access plus 30 days”
ExpiresByType image/gif A31536000
ExpiresByType image/png A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType text/plain A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType video/x-flv A31536000
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
其中 A31536000 就是 31536000 秒,相當于一年。或者也可以寫成:”access plus 365 days”,如下示例:
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon “access plus 365 days”
ExpiresByType application/x-javascript “access plus 365 days”
ExpiresByType text/css “access plus 365 days”
ExpiresByType image/gif “access plus 365 days”
ExpiresByType image/png “access plus 365 days”
ExpiresByType image/jpeg “access plus 365 days”
ExpiresByType text/plain “access plus 365 days”
ExpiresByType application/x-shockwave-flash “access plus 365 days”
ExpiresByType video/x-flv “access plus 365 days”
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
保存,重新啟動 Apache 生效。
驗證緩存設置是否生效
在 Chrome 或 Edge 瀏覽器中,訪問某.png 文件 Url(已設置緩存時間為一年),然后按 F12 查看該文件的 Headers 信息,可以看到如下圖:
瀏覽器中查看 Headers 信息
可以看到 cache-control 中的最大緩存時間為:31536000 秒 (一年),這就代表設置成功了。