Nginx 实战三(gzip 压缩)

2,302 阅读3分钟

简介

gzip是一种流行的数据压缩程序。您可以使用gzip压缩Nginx实时文件。这些文件在检索时由支持它的浏览器解压缩,好处是web服务器和浏览器之间传输的数据量更小,速度更快。

gzip不一定适用于所有文件的压缩。例如,文本文件压缩得非常好,通常会缩小两倍以上。另一方面,诸如JPEG或PNG文件之类的图像已经按其性质进行压缩,使用gzip压缩很难有好的压缩效果或者甚至没有效果。压缩文件会占用服务器资源,因此最好只压缩那些压缩效果好的文件。

使用 gzip 不仅需要 Nginx 配置,浏览器端也需要配合,需要在请求消息头中包含 Accept-Encoding: gzip(IE5 之后所有的浏览器都支持了,是现代浏览器的默认设置)。一般在请求 html 和 css 等静态资源的时候,支持的浏览器在 request 请求静态资源的时候,会加上 Accept-Encoding: gzip 这个 header,表示自己支持 gzip 的压缩方式,Nginx 在拿到这个请求的时候,如果有相应配置,就会返回经过 gzip 压缩过的文件给浏览器,并在 response 相应的时候加上 content-encoding: gzip 来告诉浏览器自己采用的压缩方式(因为浏览器在传给服务器的时候一般还告诉服务器自己支持好几种压缩方式),浏览器拿到压缩的文件后,根据自己的解压方式进行解析。

修改 nginx.conf 配置

这次我们将自定义配置抽离,在 http 模块增加一行 include /usr/local/etc/nginx/conf.d/*.conf;,表示在 conf.d 文件夹下的以 .conf 结尾的配置文件都会以子配置文件的形式加载。
可与看到 nginx 默认是没有开启压缩的

image.png 我们在 nginx 目录新建一个 conf.d 的文件夹,在这个文件夹下新建 gzip.conf 配置文件。 写入默认配置

gzip off;
gzip_types application/javascript application/json;
gzip_static on;
gzip_proxied off;
gzip_vary on;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_min_length 1k;
gzip_http_version 1.1;
  • gzip: on 开启 off 关闭
  • gzip_types: 要采用 gzip 压缩的 MIME 文件类型,其中 text/html 被系统强制启用
  • gzip_static: 默认 off,该模块启用后,Nginx 首先检查是否存在请求静态文件的 gz 结尾的文件,如果有则直接返回该 .gz 文件内容
  • gzip_proxied: 默认 off,nginx做为反向代理时启用,用于设置启用或禁用从代理服务器上收到相应内容 gzip 压缩
  • gzip_vary: 用于在响应消息头中添加 Vary:Accept-Encoding,使代理服务器根据请求头中的 Accept-Encoding 识别是否启用 gzip 压缩
  • gzip_comp_level:gzip 压缩比,压缩级别是 1-9,1 压缩级别最低,9 最高,级别越高压缩率越大,压缩时间越长,建议 4-6
  • gzip_buffers:获取多少内存用于缓存压缩结果,16 8k 表示以 8k*16 为单位获得
  • gzip_min_length:允许压缩的页面最小字节数,页面字节数从header头中的 Content-Length 中进行获取。默认值是 0,不管页面多大都压缩。建议设置成大于 1k 的字节数,小于 1k 可能会越压越大
  • gzip_http_version:默认 1.1,启用 gzip 所需的 HTTP 最低版本

我们先不开启压缩,看下服务器返回的 responseText 的大小 我们依然用之前的文件,只需要把 server.js 返回内容改变,改为比较大的 json 文件即可

image.png 重启 nginx 和 server.js 看下返回情况

image.png

9C3E5659-9E23-434C-8CD1-29F4CD31F536.png

可以看到未开启压缩时,返回的文件大小为 174kb,我们修改 gzip.conf 配置,将gzip 改为 on

gzip on;
gzip_types application/javascript application/json;
gzip_static on;
gzip_proxied off;
gzip_vary on;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_min_length 1k;
gzip_http_version 1.1;

重启 nginx,刷新页面

image.png

image.png 可以看到开启压缩后返回内容从 174k 变为了 25.8k,同时在响应头里也增加了 Content-Encoding: gzip

gzip 开启成功。