开始接触GZIP压缩是在工作中上传lodash脚本文件到服务器上。本来压缩版的脚本也有七十几KB,但是笔者的同事说上传到服务器上只有二十多KB,笔者半信半疑,怎么会有这么大的差距,服务器压缩的幅度也太大了。后来网上找了很多资料,发现GZIP确实能够节省传输过程中很多的流量。
GZIP介绍
什么是GZIP
gzip是GNUzip的缩写,是一个GUN自由软件的文件压缩程序。刚开始用于UNIX系统的文件压缩。熟悉Linux系统的读者应该了解有一种文件的后缀是.gz,这种文件就是GZIP格式的文件。现在GZIP已经成为网上使用非常普遍的一种数据压缩格式。
工作原理
既然GIZP是一种数据压缩格式,那么它是如何在浏览器和服务器之间进行数据传输的呢。通过下面一张图片能够很清晰的看出它的工作方式:
- 首先浏览器发出一个请求给服务器,在请求头上标明自己可以接收GZIP格式的数据。
- 然后服务器根据请求头,将数据经过压缩后返回给浏览器,同时在响应头上标明返回的数据是GZIP格式的数据。
- 最后浏览器将返回的数据解压后渲染。
浏览器中查看
笔者模拟了一个GZIP数据请求:
可以看到Request Headers(请求头)中有一个Accept-Encoding属性,里面有一个gzip,表示浏览器能够接受的数据格式有:gzip、deflate、sdch和br。然后在Response Headers(响应头)中有一个Content-Encoding属性,表示返回的数据格式的编码,我们看到只有一种编码,就是gzip。
优势
减小网络传输的数据量,提高网页响应速度。
服务器中如何开启GZIP
Tomcat
经过在网上找了很多资料,找到目录下的conf/server.xml文件,将Connector
进行如下改写:
1 2 3 4 5 6 7 8 9 | <Connector port="8088" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEcoding="UTF-8" compression="on" //打开压缩功能 compressionMinSize="2048" //启用压缩的输出内容大小,这里面默认为2KB noCompressionUserAgents="gozilla, traviata" //对于以下的浏览器,不启用压缩 compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,image/png,image/jpg,image/gif" //压缩类型 /> |
问题出现
但是。。。当笔者配置完后,满心欢喜的打开服务器以为有效时,发现自己太天真了。很遗憾的是,脚本并没有被压缩。我以为是服务器没有配置成功,又多次重启,但是并没有用,网上查了很多资料,也没有解决。
解决问题
笔者发现同样是CSS却是有效的,为什么脚本不行呢?但是脚本占了网络流量的很大一部分。
当笔者再次仔细查看Response Headers的时候,发现Content-Type
这个属性竟然是application/javascript
,但是在我们的代码中配置的却是text/javascript
,会不会是这个问题呢。
笔者抱着试一下的态度,在compressableMimeType
属性中添加了application/javascript
。最后再次启动服务器,OK,问题解决了。
Nodejs
Nodejs中笔者常用的库就是express,就用express作为demo。如果你的express的4.0以下的版本,只需要在代码中添加以下代码:
1 | app.use(express.compress()); |
在express 4.0以上的版本中不再集成GZIP功能,需要单独安装中间件,先通过npm i compression
安装compression,然后在项目中引用:
1 2 | var compress = require('compression'); app.use(compress()); |
NGINX
修改nginx安装目录下的conf/nginx.conf配置文件,添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #开启gzip gzip on; #压缩阀值,小于1k不压缩 gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; #压缩级别 gzip_comp_level 2; #压缩的文件类型 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript; gzip_vary off; #IE6对Gzip不怎么友好,禁止IE6进行压缩 gzip_disable "MSIE [1-6]\."; |