如何用gzip进行前端性能优化？

一、简介

HTTP 可以对传输的内容进行压缩，减少网络实际传输数据的大小。原理就是 服务器对文件进行 gzip 压缩后，再进行传输，浏览器收到资源后再解压的过程。

• 对于 js、text、json、css 这种纯文本进行压缩，效果特别好，不用改变代码即可提升网站响应速度；
• 压缩过程是需要花费 CPU 资源的，对大文件(图片、音乐等)进行压缩，不仅不能提升网站响应速度，还会增加服务器压力，让网站有明显的卡顿感。

二、nginx 开启 gzip

服务器使用 nginx，浏览器使用 chrome，开启 gzip，看看实际优化的效果。

1、修改配置

打开 nginx 的配置文件 sudo nano /etc/nginx/nginx.conf，找到 gzip 对应区域，增加下面配置后，保存退出。

# 开启gzip，关闭用off
gzip on;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，推荐6
gzip_comp_level 6;

# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# 选择压缩的文件类型，其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript


# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip_proxied any;

2、重启 nginx

# 1、重启：
sudo /etc/init.d/nginx restart

# 2、重新加载配置文件，无需重启：
sudo /etc/init.d/nginx reload

3、查看 gzip 是否开启？

1. 打开网站；
2. 打开开发者工具（windows快捷键Control+Shift+J、Mac快捷键Command+Option+J）；
3. 如下图，响应头中有 Content-Encoding: gzip ，表示已经开启。

查看是否开启gzip

4、查看 gzip 压缩效果？

1. 打开网站；
2. 打开开发者工具（windows快捷键Control+Shift+J、Mac快捷键Command+Option+J）；
3. 如下图，73.9kb表示是压缩后在网络传输的大小；574kb表示是实际文件的大小。

查看文件实际大小和网络传输大小

三、前端性能检测工具

lighthouse 是谷歌的开源项目，一键即可查找出网站所有需要优化的内容和建议。安装和使用，可以看这里！

lighthouse-report

四、参考文档

• 如何用gzip进行前端性能优化？