簡介
Web 開發中需要的靜態文件有:CSS、JS、字體、圖片,可以通過web框架進行訪問,但是效率不是最優的。
Nginx 對於處理靜態文件的效率要遠高於 Web 框架,因為可以使用 gzip 壓縮協議,減小靜態文件的體積加快靜態文件的加載速度、開啟緩存和超時時間減少請求靜態文件次數。
下面就介紹如何通過 Nginx 管理靜態文件的訪問,優化網站的訪問速度。
一、開啟 gzip
配置介紹和參數如下,建議使用時刪掉注釋。
gzip on;
#該指令用於開啟或關閉gzip模塊(on/off)
gzip_buffers 16 8k;
#設置系統獲取幾個單位的緩存用於存儲gzip的壓縮結果數據流。16 8k代表以8k為單位,安裝原始數據大小以8k為單位的16倍申請內存
gzip_comp_level 6;
#gzip壓縮比,數值范圍是1-9,1壓縮比最小但處理速度最快,9壓縮比最大但處理速度最慢
gzip_http_version 1.1;
#識別http的協議版本
gzip_min_length 256;
#設置允許壓縮的頁面最小字節數,頁面字節數從header頭得content-length中進行獲取。默認值是0,不管頁面多大都壓縮。這里我設置了為256
gzip_proxied any;
#這里設置無論header頭是怎么樣,都是無條件啟用壓縮
gzip_vary on;
#在http header中添加Vary: Accept-Encoding ,給代理服務器用的
gzip_types
text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
text/javascript application/javascript application/x-javascript
text/x-json application/json application/x-web-app-manifest+json
text/css text/plain text/x-component
font/opentype font/ttf application/x-font-ttf application/vnd.ms-fontobject
image/x-icon;
#進行壓縮的文件類型,這里特別添加了對字體的文件類型
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
#禁用IE 6 gzip
二、擴展壓縮類型
修改 /etc/nginx/mime.types
文件,增加需要壓縮的文件對應 type
到上述 gzip 配置中。下面幾乎涵蓋了所有靜態文件對應的類型:
types {
application/atom+xml atom;
application/dart dart;
application/gzip gz;
application/java-archive jar war ear;
application/javascript js jsonp;
application/json json;
application/owl+xml owl owx;
application/pdf pdf;
application/postscript ai eps ps;
application/rdf+xml rdf;
application/rss+xml rss;
application/vnd.ms-fontobject eot;
application/x-7z-compressed 7z;
application/x-bittorrent torrent;
application/x-chrome-extension crx;
application/x-font-otf otf;
application/x-font-ttf ttc ttf;
application/x-font-woff woff;
application/x-opera-extension oex;
application/x-rar-compressed rar;
application/x-shockwave-flash swf;
application/x-web-app-manifest+json webapp;
application/x-x509-ca-cert crt der pem;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xml xml;
application/xml-dtd dtd;
application/zip zip;
audio/midi kar mid midi;
audio/mp4 aac f4a f4b m4a;
audio/mpeg mp3;
audio/ogg oga ogg;
audio/vnd.wave wav;
audio/x-flac flac;
audio/x-realaudio ra;
image/bmp bmp;
image/gif gif;
image/jpeg jpe jpeg jpg;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/webp webp;
image/x-icon cur ico;
text/cache-manifest appcache manifest;
text/css css less;
text/csv csv;
text/html htm html shtml;
text/mathml mml;
text/plain txt;
text/rtf rtf;
text/vcard vcf;
text/vtt vtt;
text/x-component htc;
text/x-markdown md;
video/3gpp 3gp 3gpp;
video/avi avi;
video/mp4 f4p f4v m4v mp4;
video/mpeg mpeg mpg;
video/ogg ogv;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-matroska mkv;
video/x-ms-wmv wmv;
}
三、開啟超時時間
通過設置Expires,開啟緩存。
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
expires 30d;
access_log off;
}
location ~ .*\.(eot|ttf|otf|woff|svg)$ {
expires 30d;
access_log off;
}
location ~ .*\.(js|css)?$ {
expires 7d;
access_log off;
}