简单说一下对gzip的理解：
- 客户端访问资源时，服务端先对资源进行压缩，再返回
- 客户端自动解压，无需另行处理
第一点要注意的是，客户端每次访问资源时，服务端都会对资源进行压缩，每次压缩都会占用一定的系统资源（CPU、内存），因此，这里需要对压缩后的资源进行缓存处理。
因为前端使用了webpack打包工具，在构建过程中，使用compression-webpack-plugin插件即可对文件进行压缩，服务端直接使用压缩后的文件。
npm install --save-dev compression-webpack-plugin
在webpack添加如下配置：
const CompressionWebpackPlugin = require('compression-webpack-plugin')
//...
plugins:[
new CompressionWebpackPlugin({ //这里对大于10k的js和css文件进行压缩，其它配置参考官方文档
test: /\.(js|css)$/,
threshold: 10240
})
]
//...
修改配置文件后，构建一下npm run build
即可看到部分体积较大的js和css文件，会产生.gz格式的压缩文件。
随后还需要对部署前端代码的服务器进行配置，这里以nginx为例，打开nginx.conf文件，添加如下配置
需要注意的是，这里需要有两种不同的情况：
- 直接使用压缩后的文件
# 第一种情况
http {
# ...其它配置
# 开启gzip
gzip on;
gzip_static on;
# ...其它配置
}
- 不使用webpack打包后的.gz文件，客户端访问资源时再压缩
# 第二种情况
http {
# ...其它配置
gzip on;
gzip_static on;
gzip_min_length 10k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 8;
# 根据需要添加文件类型
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
# ...其它配置
}
启动服务器，按下F12打开开发者工具，打开network，在列表的表头右击鼠标，修改：responses Headers 下的Content-Encoding，访问页面即可看到列表中部分js和css文件Content-Encoding那一列下的值为gzip，在http response header中也可看到Accept-Encoding: gzip。
需要注意的是，若使用了代理服务器，在代理服务器中也要添加相关的gzip配置。但是，如果代理服务器使用了gzip，部署前端代码的nginx就不要使用gzip了，因为这样会导致二次压缩
让我们访问页面的速度飞一会儿~
