nginx静态压缩和动态压缩

此篇介绍两种gzip压缩的方式：

1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件；

2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器。

• webpack打包生成gz文件

安装插件（compression-webpack-plugin）：

const CompressionPlugin = require("compression-webpack-plugin");  

config.plugin("CompressionPlugin").use('compression-webpack-plugin', [{ filename: '[path][base].gz', algorithm: 'gzip', test: productionGzipExtensions,  threshold: 10240, minRatio: 0.8 }])

 打包后会生成 .gz的文件，我们将打包后的文件放进ngixn里，我们在nginx里创建一个gzip_html的文件。将打包好的gz放进去,并修改nginx.conf文件

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip_static on;

    server {
        listen       88;
        server_name  localhost;

        location / {
             root  gzip_html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

gzip_static on 表示的是静态开启gzip ，需要前端的 .gz文件,

还有一种就是nginx里开启动态的gzip，这种就不需要前端提供 .gz文件，

gzip_static on;  #开启gzip  静态压缩 需要 .gz文件
    gzip_proxied expired no-cache no-store private auth;

    gzip on; #开启gzip  动态压缩
    gzip_disable "MSIE [1-6]."; #ie1-6浏览器时禁用gzip
    gzip_vary  on; #是否在响应头添加Content-Encoding
    gzip_comp_level 6;  
    gzip_min_length 100;
    #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片
    gzip_types application/atom+xml application/geo+json application/javascript

 一般这样配置就行了，gzip_static和gzip都开启。

响应头的Content-Edcoding:gzip表示gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。