nginx緩存靜態(tài)資源窝稿，只需幾個配置提升10倍頁面加載速度
首先我們看圖說話
這是在沒有緩存的情況下野揪，這個頁面發(fā)送了很多靜態(tài)資源的請求：
可以看到访忿，靜態(tài)資源占用了整個頁面加載用時的90%以上，而且這個靜態(tài)資源還是已經(jīng)在我使用了nginx配置壓縮以后的大小斯稳，如果沒有對這些靜態(tài)資源壓縮的話海铆，那么靜態(tài)資源加載應(yīng)該會占用這個頁面展示99%以上的時間。聽起來是不是已經(jīng)被嚇到了挣惰，但是數(shù)據(jù)已經(jīng)擺在這里了卧斟，這可不是危言聳聽殴边。
然后再看看使用了nginx緩存之后的效果圖：
看到?jīng)]有，朋友們珍语，整個頁面只有請求接口的時間和從本地磁盤加載css的時間锤岸。頁面加載速度直接提升10倍以上！并且由于我這個頁面沒有采用前后端分離的方式板乙，所以html沒有緩存下來是偷，如果采用了前后端分離架構(gòu)的話，就連html都可以直接緩存募逞，那提升的速度可想而知蛋铆。當(dāng)然由于瀏覽器或者手機(jī)端對頁面加載的優(yōu)化我們并不能很直觀的感受到10倍的提升，實(shí)際上以肉眼觀察的話放接，差不多減少了一半的時間刺啦，并且由于并沒有向后端服務(wù)器請求這些靜態(tài)資源，也相當(dāng)于對后端服務(wù)器做了一層保護(hù)措施纠脾。
首先在http模塊加配置：
# 開啟gzip
gzip on;
# 啟用gzip壓縮的最小文件洪燥，小于設(shè)置值的文件將不會壓縮
gzip_min_length 1k;
# gzip 壓縮級別，1-10乳乌，數(shù)字越大壓縮的越好捧韵，也越占用CPU時間。一般設(shè)置1和2
gzip_comp_level 2;
# 進(jìn)行壓縮的文件類型汉操。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]\.";
# 設(shè)置緩存路徑并且使用一塊最大100M的共享內(nèi)存芒篷，用于硬盤上的文件索引，包括文件名和請求次數(shù)采缚，每個文件在1天內(nèi)若不活躍（無請求）則從硬盤上淘汰针炉，硬盤緩存最大10G，滿了則根據(jù)LRU算法自動清除緩存扳抽。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;
關(guān)于模塊以及nginx配置信息在上一篇文章有說明篡帕。
可以看到在http模塊中主要是使用gzip壓縮，最后一個配置才是和緩存有關(guān)的配置贸呢。
然后是server中加上location配置
location ~* ^.+\.(css|js|ico|gif|jpg|jpeg|png)$ {
log_not_found off;
# 關(guān)閉日志
access_log off;
# 緩存時間7天
expires 7d;
# 源服務(wù)器
proxy_pass http://localhost:8888;
# 指定上面設(shè)置的緩存區(qū)域
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;
}
加上這兩塊配置之后镰烧，就能享受到緩存給你帶來的快樂了。當(dāng)然系統(tǒng)優(yōu)化之路還是相當(dāng)漫長的楞陷，nginx緩存只是其中的一塊而已怔鳖，想要把系統(tǒng)達(dá)到完美還需要在很多地方下功夫，比如這些靜態(tài)資源完全可以直接在客戶端緩存固蛾，這樣連請求都不會往服務(wù)端發(fā)了结执，更大的減輕服務(wù)器的壓力度陆。
