关于nginx:如何用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，示意曾经开启。

4、查看 gzip 压缩成果？

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

三、前端性能检测工具

lighthouse 是谷歌的开源我的项目，一键即可查找出网站所有须要优化的内容和倡议。装置和应用，能够看这里！

四、参考文档

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