前端性能优化《二》：开启gzip压缩

一、背景

在使用vue-cli3搭建项目的时候，当使用npm run build进行生产环境打包的时候会发现有以下显示：

我们可以看到Gzipped那一列，也就是编译生成后的每一个文件都会有对应的Gzipped文件，并且比原文件小了不止3倍，这无疑会大大节省服务器的网络带宽。那什么是gzip呢？

二、认识gzip

1、什么是gzip

gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器：Chrome、firefox、IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。

2、gzip工作原理

1)浏览器请求url，并在request header中设置属性accept-encoding：gzip，表明浏览器支持gzip。

2)服务器收到浏览器发送的请求之后，判断浏览器是否支持gzip，如果支持gzip，则向浏览器传送压缩过的内容，不支持则向浏览器发送未经压缩的内容。一般情况下，浏览器和服务器都支持gzip，response headers返回包含content-encoding:gzip。

3)浏览器接收到服务器的响应之后判断内容是否被压缩，如果被压缩则解压缩显示页面内容。

下面我们打开taobao查看一下示例（google）：

从上图的Content-Encoding那一列我们可以看到，前面三个文件都使用的是gzip文件。
下面再放一张网络图(我自己查看的时候Request Headers没有Accept-Encoding这一项emmm很尴尬)，可以更清晰。