教你如何nginx服务器开启gzip压缩

前言

使用lighthouse检测网页后，发现提示我需要进行资源压缩

Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes

明明我前端代码已经压缩了啊，查询相关文档后发现说的是服务端gzip压缩
查询网站是否用gizp压缩

一、什么是Gzip

Gzip 是一种压缩算法，在网络传输中使用非常普遍。

需要注意的是，Gzip 压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的 1/3。

但是对于图片，音视频等媒体资源，本身就采用了有损压缩，所以再使用 gzip 并不能得到很大提升，有时候反而会适得其反。

二、前端项目如何配置开启Gzip

前端项目，打包出的 js，css资源，非常适合使用 gzip 进行压缩。

这样，用户浏览器收到服务器返回的 gzip 类型资源时，会自动解压缩。这样，既能减少带宽的损耗，也能加快资源传输的时间。

以nginx为例子，你需要会一些nginx配置以及linux命令

具体配置如下
登录服务器在nginx.conf添加gzip配置
一般是在http里面加，也可以在某个server里加
打开本项目的前端服务器配置文件，比如 nginx.conf文件

http {
	gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
}

配置项释义：

  # 开启服务器实时gzip
  gzip on;
  # 开启静态gz文件返回, 例如 /dist 文件夹的gz文件，其他的是实时压缩
  gzip_static on;
  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;
  # 设置压缩所需要的缓冲区大小
  gzip_buffers 32 4k;
  # 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;
  # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
  gzip_comp_level 7;
  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

三、处理报错

一般配置完了，重启nginx服务会报错，是nginx安装的时候缺少相应配置，这个时候需要安装
unknown directive "gzip_static" in /usr/local/nginx/conf/nginx.conf:35

具体操作

打开nginx安装目录，如果不知道nginx 安装在哪，使用 find / -name nginx

cd /nginx-1.8.0

添加相应配置（除gzip_static配置外，其他配置均为通过nginx -V查看显示的之前既有配置）

./configure  --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module

编译

make
make install

安装结束后，停掉nginx服务，重新启动，重新测试一下网页飞快启动！

打gzip测试网开始测试吧 https://tool.chinaz.com/gzips
开启gzip压缩前

开启服务器gzip压缩后