聊起前端性能优化，我们会首先想到减少http请求，使用CDN，Gulp构建，webpack构建等等…
这些方案都有一些复杂，单单webpack的构建脚本编写起来就不是个容易的事儿。
所以今天向大家介绍一个方式，不用我们动手，便可以将前端性能提高超10%的方案。
那就是Gzip。
之所以说不用我们动手，是因为这个工作一般都是运维帮忙做了。
但事情别人帮忙做了，不代表我们不需要了解。
一、什么是Gzip
Gzip 是一个压缩工具包，里边装了很多种文件压缩工具。与 win 平台 ZIP 类似。
通常 Gzip 仅用来压缩单个文件，生成 .gz 文件。
多个文件的压缩归档通常是首先将这些文件合并成一个 tar 文件，
然后再使用 Gzip 进行压缩，最后生成 .tar.gz 或者 .tgz 文件。
二.Gzip在网络请求中的应用
Gzip 是 linux 系统中常用压缩命令，能有效的减小文件体积。
那这项技术能否运用到网络请求中呢？
是否可以对网络请求的静态资源进行压缩后传递呢？
答案是可以的，
Apache, nginx, Node.js 等 web 容器都支持 Gzip 压缩功能。
使用 Gzip 会有两个明显的优点：
1.提高客户端加载速度。文件小了，加载快了。
2.节省网络带宽。文件经过压缩之后再进行网络传递，对整体的带宽占用会大大降低。
当然任何一种技术都会有缺点，Gzip 的缺点就是需要占用服务器和客户端的性能。
服务器端需要对文件进行压缩，客户端需要解压。必然会占用一部分 CPU 性能。
但是这笔账算下来还是合适的，少量的 CPU 性能损耗，带来用户体验的量级提高，是值得的。
三.使用前后效果对比
介绍完了基础知识，下面我们先看看使用效果。
以我的博客为例：www.isjs.cn
对开启Gzip前后的页面数据做一下对比。
未开启Gzip：
网络： Slow 3G（慢网络）
缓存： 禁用
请求数： 49
文件大小：1.2M
DOM 加载时间： 15.14s
load 时间： 31.03s
效果：
注意图中红色圈选位置，是所有 js 文件的请求记录。
Size 属性有两个值，上面深色的是请求数据的大小。
下方浅色的是该数据的实际大小。
观察前两条请求记录，发现实际请求的大小，和文件的大小几乎一致。
这就说明该网站没有对请求进行压缩，是原封不动的直接返回。
开启Gzip：
网络： Slow 3G（慢网络）
缓存： 禁用
请求数： 50
文件大小：942KB
DOM 加载时间： 13.1s
load 时间： 25.95s
效果：
同样观察右侧资源加载大小，下方浅色数字未发生变化，因为资源文件并没有因为开启 Gzip 而增大减小。
但是上方深色数字变化比较大，实际网络请求大小，减少了 60%
开启前后数据对比：
文件大小： 减少23%
DOM 加载时间： 减少13%
load 时间： 减少16%
以上就是小型博客的数据对比。因为博客大图较多，数据差异不明显。
接下来我们看一下 Gzip 对 React Spa 项目的优化如何：
未开启Gzip：
网络： Slow 3G（慢网络）
缓存： 禁用
请求数： 39
文件大小：1.7M
DOM 加载时间： 22.34s
load 时间： 43.51s
效果：
开启Gzip：
网络： Slow 3G（慢网络）
缓存： 禁用
请求数： 39
文件大小：1024KB
DOM 加载时间： 11.83s
load 时间： 30.92s
效果：
开启前后数据对比：
文件大小： 减少41%
DOM 加载时间： 减少46%
load 时间： 减少29%
四.如何开启Gzip
看完了前面的效果对比是不是感觉棒呆了?
js,css 文件的传输大小减少了 40% 左右。
那接下来，我们聊一聊如何开启 Gzip
1.nginx 开启 Gzip
在conf中找到nginx.conf文件，从中找到以下内容
gzip on; gzip_min_length 1000; gzip_buffers 4 16k; # gzip_http_version 1.0; gzip_comp_level 9; gzip_types text/plain application/javascript pplication/x-javascript text/css application/xml text/javascript; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\.";
配置时要注意 gzip_comp_level 属性的值越大，压缩效果越好，取值 1-9
gzip_types 为静态资源的Content-Type属性，注意javascript有多种类型。
gzip_disable 属性设置哪些浏览器不开启Gzip
2.Node.js开启Gzip
我们通常使用Node来搭建自己的web服务，下面介绍express框架下开启Gzip的方式。
安装 compression 组件：
$ cnpm install compression --save
使用组件实现Gzip：
const express = require('express');
const compression = require('compression')
const app = express();
app.use(compression({level: 9}));
app.listen(‘8080’,() => {
console.log('代理服务器已启动。');
});
五.总结
Gzip 一般运维会帮大家配置好，但难免会有遗漏。
作为前端开发，我们也有必要去了解，去学习，去检查。
让我们的产品体验更好。
本篇文章定位为基础知识，带大家大致了解一下 Gzip。
知识点如下：
什么是 Gzip？
怎么区分是否开启 Gzip？
怎么开启 Gzip？
快去查查你的网站有没有开启Gzip吧…
