前端打包gzip + nginx开启静态gzip

一、为什么用静态gzip方案？

服务端动态gzip是常见的方案，即服务端判断浏览器http请求头中的Accept-Encodin是否有gzip，有的话就说明浏览器支持gzip服务器就实时压缩生成gzip返回给浏览器，否则就返回原文件。但是这种模式是比较消耗服务器CPU的，如果前端打包的时候就压缩好，把原文件和gzip文件全丢到服务器上，服务器不干压缩的活，只区分浏览器是不是支持gzip，支持就返gzip文件，不支持就返原文件，那就能省去服务器动态压缩的环节。
PS：因为Linux系统下nginx不能向磁盘写文件，所以服务端只能实时生成。
PS：服务器数量少的条件，就不要用nginx动态压缩了。

二、前端打包静态gzip

不同的前端框架配置gzip的方式不一样，这里不多说，网上方法非常多。这里我用的VUE，可以参考下：

安装完compression-webpack-plugin插件后配置vue.config.js：

vue.config.js配置

前端静态压缩

三、nginx配置静态gzip

1、前端文件部署到服务器后，在nginx.config的目标应用location下配置gzip_static;
gzip_static on;
gzip_http_version 1.1;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;`

nginx.config配置

2、重启nginx即可验证。but 如果重启时nginx报gzip_static unknow的话：

说明nginx的编译参数缺失，需要添加--with-http_gzip_static_module参数，然后重新编译：

（1）查看之前配置的编译参数，即configure arguments，（可以看到我这台服务器configure arguments没配置任何参数，空的）：

（2）复制之前的编译参数，在末尾加上--with-http_gzip_static_module，再重新编译：

（3）编译完成后，重启下nginx。

3、验证静态gzip是否生效：

浏览器访问目标网站，控制台network查看请求的文件Request Headers：首先判断有没有content-encoding: gzip，有表示开启了gzip，没有表示没开启gzip；有content-encoding: gzip的情况再看ETag有没有W\，有表示服务器启用了动态压缩，没有则表示返回了.gz，说明gzip_static生效。