前端性能优化：启用 gzip

大家好，我是前端西瓜哥。今天带大家学习如何启用 gzip 来做前端性能优化。

HTTP 上的 gzip

gzip 是一种优秀的压缩算法，我们可以在 HTTP 请求上对一些文本文件，设置 gzip 压缩。

服务端将响应头设置上 Content-encoding: gzip，表示当前资源会使用 gzip 压缩，提示客户端解压使用。

当然前提是客户端支持该压缩算法，服务端会通过客户端发送的请求头中的 Accept-Encoding 字段来确定是否支持。

只对文本文件进行压缩，是因为文本类压缩效果好，而图片视频这些文件则本身就是进行压缩过的，压缩起来不仅效果差，还因为体积大耗费时间。

我用我自己的网站 https://frontend.fstars.wang 做了测试。

开启 gzip 前 index.html 大小为 8.4 KB：

开了 gzip 后减小为 2.7 KB：

你还可以对比图片上其他资源 gzip 压缩前后的大小变化，提升还是相当可观的。我能够感觉到加载确实快了一些的。

Nginx 上开启 gzip

Nginx 默认是不开启 gzip 的，你需要这样设置：

http {
  # 开启 gzip 压缩
  gzip  on;

  # 使用 gzip 压缩的文件类型
  # 此外，text/html 是自带的，不用写上
  gzip_types text/plain text/css application/javascript application/json text/xml application/xml application/xml+rss;
  
  # 小于 256 字节的不压缩
  # 这是因为压缩是需要时间的，太小的话压缩收益不大
  gzip_min_length 256;
  
  # 开启静态压缩
  # 压缩的资源会被缓存下来，下次请求时就直接使用缓存
  gzip_static  on;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结尾

绝大多数的网站都对文本文件做了 gzip 压缩传输处理，降低了带宽压力，也让用户能够更快地加载资源，属于是一个非常基础的前端性能优化了。

如果你也部署了自己的个人网站，快去看看你是否正确地开启了 gzip。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。