一、简介

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

  • 对于 js、text、json、css 这种纯文本进行压缩，成果特地好，不必扭转代码即可晋升网站响应速度；
  • 压缩过程是须要破费 CPU 资源的，对大文件(图片、音乐等)进行压缩，不仅不能晋升网站响应速度，还会减少服务器压力，让网站有显著的卡顿感。
二、nginx 开启 gzip

服务器应用 nginx，浏览器应用 chrome，开启 gzip，看看理论优化的成果。

1、批改配置

关上 nginx 的配置文件 sudo nano /etc/nginx/nginx.conf ，找到 gzip 对应区域，减少上面配置后，保留退出。

# 开启gzip，敞开用offgzip on;# 是否在http header中增加Vary: Accept-Encoding，倡议开启gzip_vary on;# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU工夫，举荐6gzip_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进行前端性能优化？