前端性能优化——gzip压缩

背景：把js，css，图片等压缩，尽量减少文件的大小，提升响应速度

压缩原理：
客户端： 请求头中有个Accept-Encoding来标识对压缩的支持
服务端：配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

如何查看是否压缩？
content-encoding是gzip的话就说明返回的是gzip

如何启用gzip?
node端：加上compress模块即可
因为node读取的是生成目录中的文件，所以还要用webpack等其他工具进行压缩成gzip，webpack的配置如下：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
    new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标文件名
        algorithm: 'gzip',// 使用gzip压缩
        test: new RegExp(
            '\\.(js|css)$' // 压缩 js 与 css
        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
    })
);

plugins是webpack的插件

tomcat:
…

nginx:
gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{……}之间
gzip on on为启用，off为关闭
gzip_min_length 1k 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
gzip_buffers 4 16k 获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
gzip_comp_level 5 gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php 对特定的MIME类型生效,其中’text/html’被系统强制启用
gzip_http_version 1.1 识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_vary on 启用应答头"Vary: Accept-Encoding"
gzip_proxied off nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
gzip_disable msie6 (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
以上代码可以插入到 http {…}整个服务器的配置里，也可以插入到虚拟主机的 server {…}或者下面的location模块内

参考：https://segmentfault.com/a/1190000012571492