简介
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;
}