简介

Web 开发中需要的静态文件有：CSS、JS、字体、图片，可以通过web框架进行访问，但是效率不是最优的。
Nginx 对于处理静态文件的效率要远高于 Web 框架，因为可以使用 gzip 压缩协议，减小静态文件的体积加快静态文件的加载速度、开启缓存和超时时间减少请求静态文件次数。
下面就介绍如何通过 Nginx 管理静态文件的访问，优化网站的访问速度。

一、开启 gzip

配置介绍和参数如下，建议使用时删掉注释。

  1. gzip on;
  2. #该指令用于开启或关闭gzip模块(on/off)
  3. gzip_buffers 16 8k;
  4. #设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。16 8k代表以8k为单位，安装原始数据大小以8k为单位的16倍申请内存
  5. gzip_comp_level 6;
  6. #gzip压缩比，数值范围是1-9，1压缩比最小但处理速度最快，9压缩比最大但处理速度最慢
  7. gzip_http_version 1.1;
  8. #识别http的协议版本
  9. gzip_min_length 256;
  10. #设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。默认值是0，不管页面多大都压缩。这里我设置了为256
  11. gzip_proxied any;
  12. #这里设置无论header头是怎么样，都是无条件启用压缩
  13. gzip_vary on;
  14. #在http header中添加Vary: Accept-Encoding ,给代理服务器用的
  15. gzip_types
  16.     text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
  17.     text/javascript application/javascript application/x-javascript
  18.     text/x-json application/json application/x-web-app-manifest+json
  19.     text/css text/plain text/x-component
  20.     font/opentype font/ttf application/x-font-ttf application/vnd.ms-fontobject
  21.     image/x-icon;
  22. #进行压缩的文件类型,这里特别添加了对字体的文件类型
  23. gzip_disable "MSIE [1-6]\.(?!.*SV1)";
  24. #禁用IE 6 gzip

二、扩展压缩类型

修改 /etc/nginx/mime.types 文件，增加需要压缩的文件对应 type 到上述 gzip 配置中。下面几乎涵盖了所有静态文件对应的类型：

  1. types {
  2.     application/atom+xml                atom;
  3.     application/dart                    dart;
  4.     application/gzip                    gz;
  5.     application/java-archive            jar war ear;
  6.     application/javascript              js jsonp;
  7.     application/json                    json;
  8.     application/owl+xml                 owl owx;
  9.     application/pdf                     pdf;
  10.     application/postscript              ai eps ps;
  11.     application/rdf+xml                 rdf;
  12.     application/rss+xml                 rss;
  13.     application/vnd.ms-fontobject       eot;
  14.     application/x-7z-compressed         7z;
  15.     application/x-bittorrent            torrent;
  16.     application/x-chrome-extension      crx;
  17.     application/x-font-otf              otf;
  18.     application/x-font-ttf              ttc ttf;
  19.     application/x-font-woff             woff;
  20.     application/x-opera-extension       oex;
  21.     application/x-rar-compressed        rar;
  22.     application/x-shockwave-flash       swf;
  23.     application/x-web-app-manifest+json webapp;
  24.     application/x-x509-ca-cert          crt der pem;
  25.     application/x-xpinstall             xpi;
  26.     application/xhtml+xml               xhtml;
  27.     application/xml                     xml;
  28.     application/xml-dtd                 dtd;
  29.     application/zip                     zip;
  30.     audio/midi                          kar mid midi;
  31.     audio/mp4                           aac f4a f4b m4a;
  32.     audio/mpeg                          mp3;
  33.     audio/ogg                           oga ogg;
  34.     audio/vnd.wave                      wav;
  35.     audio/x-flac                        flac;
  36.     audio/x-realaudio                   ra;
  37.     image/bmp                           bmp;
  38.     image/gif                           gif;
  39.     image/jpeg                          jpe jpeg jpg;
  40.     image/png                           png;
  41.     image/svg+xml                       svg svgz;
  42.     image/tiff                          tif tiff;
  43.     image/webp                          webp;
  44.     image/x-icon                        cur ico;
  45.     text/cache-manifest                 appcache manifest;
  46.     text/css                            css less;
  47.     text/csv                            csv;
  48.     text/html                           htm html shtml;
  49.     text/mathml                         mml;
  50.     text/plain                          txt;
  51.     text/rtf                            rtf;
  52.     text/vcard                          vcf;
  53.     text/vtt                            vtt;
  54.     text/x-component                    htc;
  55.     text/x-markdown                     md;
  56.     video/3gpp                          3gp 3gpp;
  57.     video/avi                           avi;
  58.     video/mp4                           f4p f4v m4v mp4;
  59.     video/mpeg                          mpeg mpg;
  60.     video/ogg                           ogv;
  61.     video/quicktime                     mov;
  62.     video/webm                          webm;
  63.     video/x-flv                         flv;
  64.     video/x-matroska                    mkv;
  65.     video/x-ms-wmv                      wmv;
  66. }

三、开启超时时间

通过设置Expires，开启缓存。

  1. location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
  2.     expires 30d;
  3.     access_log off;
  4. }
  5. location ~ .*\.(eot|ttf|otf|woff|svg)$ {
  6.     expires 30d;
  7.     access_log off;
  8. }
  9. location ~ .*\.(js|css)?$ {
  10.     expires 7d;
  11.     access_log off;
  12. }