服务端开启gzip压缩配置与效果对比

为了提升页面加载速度，可以在服务端（nginx）开启gzip网页压缩，减小网络传输过程中文件大小。从而减小服务端带宽限制的压力。

1.压缩实现原理

         网页压缩是一项由 WEB 服务器和浏览器之间共同遵守的协议，也就是说 WEB 服务器和浏览器都必须支持该技术，所幸的是现在流行的浏览器都是支持的，包括Chrome、 IE、FireFox等；服务器有Nginx、Apache 、IIS 等。双方的协商过程如下：

首先浏览器请求某个 URL 地址，并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate，表明浏览器支持 gzip 和 deflate 这两种压缩方式。

WEB服务器接收到请求后判断浏览器是否支持压缩，如果支持就传送压缩后的响应内容，否则传送不经过压缩的内容；浏览器获取响应内容后，判断内容是否被压缩，如果是则解压缩，然后显示响应页面的内容。

2.Nginx开启压缩配置

         只需在nginx配置文件nginx.conf中添加以下配置信息，然后重启nginx即可。

gzip on;  

gzip_min_length 1k;  

gzip_buffers 16 64k;  

gzip_http_version 1.1;  

gzip_comp_level 6;  

gzip_types text/plain application/x-javascript application/javascript text/css; 

gzip_vary on;

重启nginx

gzip配置参数说明

//开启gzip压缩

gzip on;  

//最小的长度，1K，文件如果太小，小于1K，就不会压缩,因为没准压缩之后还要变大

gzip_min_length 1k;  

//设置缓存的单位，压缩的时候要分配的缓冲区，缓冲区以16K为单位，往缓冲区写入内容的时候超过16K的时候，那么就会按照4倍的大小创建新的缓冲区，也就是建立一个64K的存储，这样把压缩的内容倒进去

gzip_buffers 4 16k;    

//压缩级别1-9，比如level为1的话，压缩的比例比较低，但是效率比较高，官方推荐6

gzip_comp_level 6;   

//定义了压缩的类型，比如文本的，js、css等文本文件压缩，默认压缩text/html 不需要指定，否则报错

gzip_type text/plain application/javascript text/css;  

3.压缩效果对比

3.1压缩前首页js、css文件加载情况如下

3.2开启压缩之后首页js、css文件加载情况

 

3.3对比

	压缩前		压缩后
文件名	文件大小	加载时间(ms)	文件大小	加载时间(ms)
vendor.32d8a9a922505e3a953d.js	1.4M	2730	404K	143
0.0c68d259fc9ec39cb43b.js	1.2M	1800	475K	109
app.bd3aa96845ba1e7f9c8c.js	320KB	1500	82K	134
1.17c1d165c1689ea66c68.js	110K	25	32.4K	87
mainfest.fc904f5655594a9c58b4.js	7.5K	63	4.5K	29
155.505baa43c9a758b359b8.js	1.8K	45	1.1K	48

经过统计对比

几个较大的js文件在文件大小与传输时间都明显的大幅减小。

由于本系统采用VUE框架开发，除了首页html剩下的html均由js文件输出，因此可以得出经过压缩优化，极大的提高的首页与各个子页面的加载速度。