Gzip压缩机制

Gzip压缩机制
一、什么是gzip？
Gzip是一种内容压缩格式，一般对纯文本内容可压缩到原大小的40-70左右％。在实际的应用中我们发现压缩的比率往往在 3 到 10 倍，也就是本来 50k 大小的页面，采用压缩后实际传输的内容大小只有 5 至 15k 大小。压缩后的后缀名会以.gz结尾。
现在大部份浏览器都可以浏览经过Gzip压缩过的内容，在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate，表明浏览器支持 gzip 和 deflate 这两种压缩方式（事实上 deflate 也是使用 gzip 压缩协议）。
二、如何在webpack中配置gzip？
1、首先在config/index.js–>module.exports–>build,配置
productionGzip: false, // 是否开启 gzip
productionGzipExtensions: [‘js’, ‘css’] // 需要使用 gzip 压缩的文件扩展名

2、然后在webpack.prod.conf.js 生产环境下的配置文件中配置

3. 生成的css和js后缀名修改
生成后的会有.css.gz和.js.gz这样的后缀名的文件，手动修改后缀名为.cssgz和.jsgz。在页面像正常css和js一样引用。
三、服务器配置Gzip
Tomcat：
在server.xml中

<Connector executor="tomcatThreadPool"
               port="8070"
               protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
               URIEncoding='UTF-8'
               disableUploadTimeout="true" 
               compression="on"
               compressionMinSize="2048" 
               noCompressionUserAgents="gozilla, traviata" 
               compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,text/json"/>

nignx：
在nignx.conf中：
在http中加入
gzip on;#开启Gzip
gzip_min_length 10k; # 不压缩临界值，大于1K的才压缩，一般不用改
gzip_buffers 4 16k;
#gzip_http_version 1.0; #用了反向代理的话，末端通信是HTTP/1.0，有需求的应该也不用看我这科普文了；有这句的话注释了就行了，默认是HTTP/1.1
gzip_comp_level 5;#压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
#进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;#跟Squid等缓存服务有关，on的话会在Header里增加”Vary: Accept-Encoding”。
gzip_disable “MSIE [1-6].”;#IE6对Gzip不怎么友好，不给它Gzip了