我们知道Gzip是一种压缩技术，它将浏览器请求的文件先在服务器端进行压缩，然后传递给浏览器，浏览器解压之后再进行页面的解析工作。在对vue-cli3的性能优化里，都会建议我们开启gzip，自己在nginx配置中遇到了一些小问题，关于gzip压缩优化，我想可有两种方式可以实现，在此简单记录一下。

一、完全由后端自行压缩

当我们是用nginx做服务时，我们可以开启ngnx的gzip压缩，配置可以对每个请求的js或者css等静态资源进行动态压缩，然后输出，不过这种会造成服务器的更多性能开支，也浪费了cpu资源。当然用Apache做服务时同样也可以，这种nginx的基本配置如下:

#开启gzip模式
gzip on;

#gizp压缩起点，文件大于25k才进行压缩
gzip_min_length 25;

#gzip 压缩级别为1-9，数字越大压缩的越好，也越占用CPU的资源，自己一般设置4-6范围
gzip_comp_level 4;

#进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/json;

#是否传输gzip压缩标志，就是在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

#设置gzip压缩针对的http协议版本，可以不设置，目前几乎都是1.1
gzip_http_version 1.1;

当然还有一些参数，可以采用默认设置即可，上面是配置在nginx的http里面，如图所示，请求到nginx动态压缩的.gz文件了。

如下图所示，我们用浏览器查看我们请求的资源已经成功开启gzip压缩了。

二、webpack打包成.gz文件，nginx开启gzip static静态压缩

既然前端可以通过webpack打包生成.gz压缩文件，我想就没必要完全通过nginx去动态压缩了，是更好的优化。

1、在vue-cli3中配置gizp

vue-cli3我们可以使用compression-webpack-plugin插件来build压缩，具体配置可以查看：

vue-cli3.0入门-配置vue.config.js和优化（三）

2、nginx中开启gzip静态压缩

在这里，自己配置的时候遇到一个小问题，在安装完nginx之后，搜索一些资料，说配置gzip_static on;就可以了，后来发现启动都报错了，网上查找一遍才知道，原来用./configure默认配置nginx时，默认并没有安装有gzip static静态模块，而默认安装的是ngx_http_gzip_module，就是上面我们说动态压缩。

nginx提供有gzip static模块，我们想要使用它时，需要在安装nginx编译的时候把它编译进去如下：（这里自己是卸载然后重装nginx）

./configure --with-http_gzip_static_module

然后编译安装就可以了。nginx具体安装步骤可以参考：

Centos7服务器安装Nginx步骤和使用说明

location / {
	root   /workspace/web/;
	index  index.html index.htm;
	#映射到index.html上，防止页面刷新404问题
	try_files $uri $uri/ /index.html;  
	gzip_static on;
}

然后用./nginx -s reload重新加载一下nginx配置文件就可以了。

下面自己实际测试一下看是否成功。

2.1、当nginx服务器已经配置好gzip_static on，而js文件中没有.gz压缩包的的情况时。

我们可以通过火狐浏览器看我们的网络请求，如图所示看到，并没有压缩，传输大小不变，因为我们没有提供.gz压缩文件。

2.2、当nginx服务器已经配置好gzip_static on，而js文件中有.gz压缩包的的情况时。

我们可以看到已经是我们想要的正常压缩了，传输大小已经是我们的压缩包了，这个才是nginx的静态压缩，达到自己优化的目的了。

三、当然两种我们都可以配置上

在第一种nginx动态压缩的情况下加上gzip_static on也是可以的。

#开启后会先寻找以.gz结尾的文件，找到直接返回，不会占用cpu进行压缩，如果找不到则进行压缩
gzip_static  on;

其实看起来是简单的，以上是自己实际测试的结果，并加以详细说明的记录，方便以后查看，如有错误之处，欢迎指正。