一、背景介绍

       历史遗留问题,在项目创建初期前端力量薄弱,网站大部分image、js、css与业务应用存放在一起,未上传到CDN中,最终导致网站访问缓慢,经过排查由于静态资源大量消耗带宽。接下来介绍通过nginx的gzip对静态资源进行压缩,减少带宽消耗。

二、gzip

gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,用.gz结尾

nginx中gzip压缩功能由ngx_http_gzip_module模块支持,ngx_http_gzip_module在nginx中默认安装,但gzip压缩默认是关闭状态,需要手动开启。

gzip 开启后会在服务器端对指定资源进行压缩后,传输到客户端由浏览器进行解压缩(目前大部分浏览器都支持gzip解压缩),在压缩和解压缩过程中都需要CPU支持。由于gzip对文件的压缩率非常高,可压缩40%~80%之间(压缩后是原来的20%~60%大小),对网站加载速度的提高非常可观。

三、gzip配置说明

     1) gzip on;   开启gzip压缩
     2) gzip_min_length 1k;   设置允许压缩的页面最小字节数,1k以下可能会存在越压越大的情况
     3) gzip_buffers 4 16k;  设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流
     4) gzip_http_version 1.1 ; 默认值: gzip_http_version 1.1,标识只有http协议是1.1版本的才会开启压缩,因为早期浏览器可能存在不支持自解压功能,会存在用户看到乱码的风险
     5) gzip_comp_level 3; 默认1,gzip压缩比/压缩级别,压缩级别 1-9,级别越高压缩率越大,越耗CPU,压缩时间越长
     6) gzip_types text/plain text/html application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png image/x-icon ;  默认 text/html,可压缩文件的格式,只有指定格式的文件才会进行压缩,具体格式如下所示:

types {text/html                             html htm shtml;text/css                              css;text/xml                              xml;image/gif                             gif;image/jpeg                            jpeg jpg;application/javascript                js;application/atom+xml                  atom;application/rss+xml                   rss;text/mathml                           mml;text/plain                            txt;text/vnd.sun.j2me.app-descriptor      jad;text/vnd.wap.wml                      wml;text/x-component                      htc;image/png                             png;image/tiff                            tif tiff;image/vnd.wap.wbmp                    wbmp;image/x-icon                          ico;image/x-jng                           jng;image/x-ms-bmp                        bmp;image/svg+xml                         svg svgz;image/webp                            webp;application/font-woff                 woff;application/java-archive              jar war ear;application/json                      json;application/mac-binhex40              hqx;application/msword                    doc;application/pdf                       pdf;application/postscript                ps eps ai;application/rtf                       rtf;application/vnd.apple.mpegurl         m3u8;application/vnd.ms-excel              xls;application/vnd.ms-fontobject         eot;application/vnd.ms-powerpoint         ppt;application/vnd.wap.wmlc              wmlc;application/vnd.google-earth.kml+xml  kml;application/vnd.google-earth.kmz      kmz;application/x-7z-compressed           7z;application/x-cocoa                   cco;application/x-java-archive-diff       jardiff;application/x-java-jnlp-file          jnlp;application/x-makeself                run;application/x-perl                    pl pm;application/x-pilot                   prc pdb;application/x-rar-compressed          rar;application/x-redhat-package-manager  rpm;application/x-sea                     sea;application/x-shockwave-flash         swf;application/x-stuffit                 sit;application/x-tcl                     tcl tk;application/x-x509-ca-cert            der pem crt;application/x-xpinstall               xpi;application/xhtml+xml                 xhtml;application/xspf+xml                  xspf;application/zip                       zip;application/octet-stream              bin exe dll;application/octet-stream              deb;application/octet-stream              dmg;application/octet-stream              iso img;application/octet-stream              msi msp msm;application/vnd.openxmlformats-officedocument.wordprocessingml.document    docx;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;application/vnd.openxmlformats-officedocument.presentationml.presentation  pptx;audio/midi                            mid midi kar;audio/mpeg                            mp3;audio/ogg                             ogg;audio/x-m4a                           m4a;audio/x-realaudio                     ra;video/3gpp                            3gpp 3gp;video/mp2t                            ts;video/mp4                             mp4;video/mpeg                            mpeg mpg;video/quicktime                       mov;video/webm                            webm;video/x-flv                           flv;video/x-m4v                           m4v;video/x-mng                           mng;video/x-ms-asf                        asx asf;video/x-ms-wmv                        wmv;video/x-msvideo                       avi;
}

来源于nginx/conf/mime.types 文件
     7) gzip_vary on;  http头联合使用,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩
     8) gzip_disable "MSIE [1-6]\.";   禁用IE1-6版本使用gzip压缩

四、gizp 配置案例

location ~* \.(jpg|jpeg|gif|png|ico|css|js)$ {gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 3;gzip_types application/x-javascript text/css text/javascript image/jpeg image/gif image/png image/x-icon;gzip_vary on;gzip_disable "MSIE [1-6]\.";}

以上配置表示对.jpg .jpeg  .gif  .ping  .ico  .css  .js 后缀结尾的文件开启gzip压缩

五、Gzip开启验证

chrome  F12 调试

1) 开启gzip压缩结果

2) 不开启gzip压缩结果

nginx 开启gzip压缩相关推荐

  1. Nginx开启Gzip压缩配置详解

    Nginx开启Gzip压缩配置详解 最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了N ...

  2. Nginx开启gzip压缩配置参数

    Nginx开启gzip压缩配置参数 场景 图片资源较大,前端页面响应加载时间较长 解决方案 开启nginx的gzip进行资源的压缩,可以达到压缩静态文件大小,提高页面访问速度,节省流量和带宽的效果. ...

  3. webpack+nginx开启gzip压缩部署项目

    首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...

  4. Nginx开启Gzip压缩大幅提高页面加载速度

    2019独角兽企业重金招聘Python工程师标准>>> 有时候我们会碰到API接口响应很快,但是完成速度很慢的情况,其主要原因是数据传输过大.因此我们需要对数据进行压缩,现这里采用N ...

  5. nginx 开启gzip压缩--字符串压缩比率很牛叉

    刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了. 环境:Debian 6 1.Vim打开Nginx配置文件 v ...

  6. nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包

    一.前言 不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip ...

  7. Nginx开启gzip压缩解决react打包文件过大

    用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...

  8. Nginx开启GZIP压缩,提升前端访问速度

    将响应报⽂发送⾄客户端之前可以启⽤压缩功能,这能够有效地节约带宽,并提⾼响应⾄客户端的速度 1.原始配置如下 worker_processes 1;events {worker_connections ...

  9. nginx开启gzip

    一:开启gzip的原因? Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能 二 :nginx如何配置gzip ...

最新文章

  1. TypeError: can only concatenate str (not “float“) to str
  2. 超级简单的jquery轮播图demo
  3. Qt实现多国语言(即界面翻译)可实时进行切换
  4. AtCoder AGC032E Modulo Pairing (二分、贪心结论)
  5. 1126 求递推序列的第N项 (Fnb + mod + 思维)
  6. 《CSS揭秘》读书笔记
  7. java字节码_好的,每个接触Java字节码的人
  8. JavaScript中带有示例的Math.PI属性
  9. jvm 堆 比例_JVM调优原则
  10. mel滤波器组频率响应曲线_非常好的滤波器知识总结,值得一看!
  11. c++ 类和对象的内存管理
  12. java代码逆向工程生成uml
  13. 刚刚,任正非为姚安娜商标事件道歉
  14. 怎么让图片居中php,怎么让CSS文件里图片居中
  15. Emacs Lisp程序单步调试
  16. 宜信正式开源其 AIOps 落地三大利器
  17. 2018 Google IO大会来了
  18. 有各组方差怎么算组间平方和_方差分析:组间离差平方和组内离差平方的定义是什么?...
  19. spring data mongodb 大数据量查询性能差的原因(20s 优化到2s)
  20. java url参数转map_url参数和map之间的转换

热门文章

  1. centos9 intel集显直通方法
  2. 【2020 ACM Fellow 华人学者】 陶宇飞 香港中文大学
  3. 另类神秘幽浮飞棍之迷已被解开
  4. 数据结构复习 ---- 邻接矩阵
  5. 最新短网址生成api接口(t.cn、url.cn短链接生成)
  6. 大数据处理的关键技术是什么?
  7. ServiceMesh到底好不好
  8. Zuul网关拦截器配置
  9. Unity(一)入门:Unity Hub下载 Unity安装
  10. [VCS]filelist.list的做法