nginx 开启gzip压缩
一、背景介绍
历史遗留问题,在项目创建初期前端力量薄弱,网站大部分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压缩相关推荐
- Nginx开启Gzip压缩配置详解
Nginx开启Gzip压缩配置详解 最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了N ...
- Nginx开启gzip压缩配置参数
Nginx开启gzip压缩配置参数 场景 图片资源较大,前端页面响应加载时间较长 解决方案 开启nginx的gzip进行资源的压缩,可以达到压缩静态文件大小,提高页面访问速度,节省流量和带宽的效果. ...
- webpack+nginx开启gzip压缩部署项目
首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...
- Nginx开启Gzip压缩大幅提高页面加载速度
2019独角兽企业重金招聘Python工程师标准>>> 有时候我们会碰到API接口响应很快,但是完成速度很慢的情况,其主要原因是数据传输过大.因此我们需要对数据进行压缩,现这里采用N ...
- nginx 开启gzip压缩--字符串压缩比率很牛叉
刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了. 环境:Debian 6 1.Vim打开Nginx配置文件 v ...
- nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包
一.前言 不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip ...
- Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...
- Nginx开启GZIP压缩,提升前端访问速度
将响应报⽂发送⾄客户端之前可以启⽤压缩功能,这能够有效地节约带宽,并提⾼响应⾄客户端的速度 1.原始配置如下 worker_processes 1;events {worker_connections ...
- nginx开启gzip
一:开启gzip的原因? Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能 二 :nginx如何配置gzip ...
最新文章
- TypeError: can only concatenate str (not “float“) to str
- 超级简单的jquery轮播图demo
- Qt实现多国语言(即界面翻译)可实时进行切换
- AtCoder AGC032E Modulo Pairing (二分、贪心结论)
- 1126 求递推序列的第N项 (Fnb + mod + 思维)
- 《CSS揭秘》读书笔记
- java字节码_好的,每个接触Java字节码的人
- JavaScript中带有示例的Math.PI属性
- jvm 堆 比例_JVM调优原则
- mel滤波器组频率响应曲线_非常好的滤波器知识总结,值得一看!
- c++ 类和对象的内存管理
- java代码逆向工程生成uml
- 刚刚,任正非为姚安娜商标事件道歉
- 怎么让图片居中php,怎么让CSS文件里图片居中
- Emacs Lisp程序单步调试
- 宜信正式开源其 AIOps 落地三大利器
- 2018 Google IO大会来了
- 有各组方差怎么算组间平方和_方差分析:组间离差平方和组内离差平方的定义是什么?...
- spring data mongodb 大数据量查询性能差的原因(20s 优化到2s)
- java url参数转map_url参数和map之间的转换