nginx緩存靜態資源，只需幾個配置提升10倍頁面加載速度

首先我們看圖說話

這是在沒有緩存的情況下，這個頁面發送了很多靜態資源的請求：

 

1.png

可以看到，靜態資源占用了整個頁面加載用時的90%以上，而且這個靜態資源還是已經在我使用了nginx配置壓縮以后的大小，如果沒有對這些靜態資源壓縮的話，那么靜態資源加載應該會占用這個頁面展示99%以上的時間。聽起來是不是已經被嚇到了，但是數據已經擺在這里了，這可不是危言聳聽。

然后再看看使用了nginx緩存之后的效果圖：

 

 

2.png

看到沒有，朋友們，整個頁面只有請求接口的時間和從本地磁盤加載css的時間。頁面加載速度直接提升10倍以上！並且由於我這個頁面沒有采用前后端分離的方式，所以html沒有緩存下來，如果采用了前后端分離架構的話，就連html都可以直接緩存，那提升的速度可想而知。當然由於瀏覽器或者手機端對頁面加載的優化我們並不能很直觀的感受到10倍的提升，實際上以肉眼觀察的話，差不多減少了一半的時間，並且由於並沒有向后端服務器請求這些靜態資源，也相當於對后端服務器做了一層保護措施。

首先在http模塊加配置：

# 開啟gzip
gzip  on;
# 啟用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
gzip_min_length 1k;
# gzip 壓縮級別，1-10，數字越大壓縮的越好，也越占用CPU時間。一般設置1和2
gzip_comp_level 2;
# 進行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 設置緩存路徑並且使用一塊最大100M的共享內存，用於硬盤上的文件索引，包括文件名和請求次數，每個文件在1天內若不活躍（無請求）則從硬盤上淘汰，硬盤緩存最大10G，滿了則根據LRU算法自動清除緩存。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

 

關於模塊以及nginx配置信息在上一篇文章有說明。

可以看到在http模塊中主要是使用gzip壓縮，最后一個配置才是和緩存有關的配置。

然后是server中加上location配置

location ~* ^.+\.(css|js|ico|gif|jpg|jpeg|png)$ {
 log_not_found off;
 # 關閉日志
 access_log off;
 # 緩存時間7天
 expires 7d;
 # 源服務器
 proxy_pass http://localhost:8888;
 # 指定上面設置的緩存區域
 proxy_cache imgcache;
 # 緩存過期管理
 proxy_cache_valid 200 302 1d;
 proxy_cache_valid 404 10m;
 proxy_cache_valid any 1h;
 proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
 }

 

加上這兩塊配置之后，就能享受到緩存給你帶來的快樂了。當然系統優化之路還是相當漫長的，nginx緩存只是其中的一塊而已，想要把系統達到完美還需要在很多地方下功夫，比如這些靜態資源完全可以直接在客戶端緩存，這樣連請求都不會往服務端發了，更大的減輕服務器的壓力。