HTTP 资源压缩

Question

减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。gzip 是在 Linux 系统中经常使用的一个对文件进行压缩和解压缩的命令，既方便又好用。今天具体讲解以下知识点：

1. 与压缩有关的 HTTP 首部字段
2. 压缩的几种方式
3. nginx 中如何配置

我们需要关注下面两个值

1. response headers 中的 content-encoding
2. request headers 中的 accept-encoding

content-encoding 是指网页使用了哪种压缩方式传输数据给你，accept-encoding 表示你发送请求时告诉服务器，我可以解压这些格式的数据。

二者的关系是，对方网页会根据你发送的 accept-encoding 来决定用什么格式 content-encoding 传给你。

语法

Accept-Encoding: gzip
Accept-Encoding: compress
Accept-Encoding: deflate
Accept-Encoding: br
Accept-Encoding: identity
Accept-Encoding: *

// Multiple algorithms, weighted with the quality value syntax:
Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5

1、 gzip 使用 Lempel-Ziv 编码（ LZ77 ）的压缩格式，带有 32 位 CRC 。

2、 compress 使用 Lempel-Ziv-Welch（ LZW ）算法的压缩格式。

3、 deflate 使用 zlib 结构的压缩格式，以及 deflate 压缩算法。

4、 br 使用 Brotli 算法的压缩格式。

5、 dentity 指示身份功能（即不压缩，也不修改）。即使不存在，该值始终被认为是可以接受的。

若想要增加优先级，则使用 q= 来额外表示权重值 ，用分号（ ; ）进行分隔。权重值 q 的范围是 0~1（可精确到小数点后 3 位），且 1 为最大值。不指定权重 q 值时，默认权重为 q=1.0 。

另外，也可使用星号（ * ）作为通配符，指定任意的编码格式。

例子

Accept-Encoding: gzip

Accept-Encoding: gzip, compress, br

Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1

　

HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术。大流量的 web 站点常常使用 gzip 压缩技术来让用户感受更快的速度。一般对纯文本内容可压缩到原大小的 40%，这样传输就快了，效果就是你点击网址后会很快的显示出来，当然这也会增加服务器的负载，一般服务器中都安装有这个功能模块的。

compress 这个命令才是真正没什么用的命令，因为用 compress 命令压缩的文件可以用 gzip 解压，但是 gzip 压缩的文件却不能用 uncompress 命令解压。而且 compress 是一个非常老的工具，只有在非常旧的系统上才有，新版的系统上没有，还要额外安装，但是 compress 命令的压缩比又比不上 gzip，谁会安装一个 compress 命令来用呢。

zlib 和 gzip 都只是一种压缩格式，数据具体压缩成什么样，要看用的什么压缩算法，gzip 目前只有 deflate 一种压缩算法，zlib 有多种，但默认也使用 deflate。

使用 brotli 替换 deflate 来对文本文件压缩通常可以增加 20%的压缩密度，而压缩与解压缩速度则大致不变。使用 Brotli 进行流压缩的内容编码类型已被提议使用“br”。

Brotli 有更高的压缩率，但是同时也需要更长的压缩时间，所以在请求的时候实时进行压缩并不是一个很好的实践（当然你可以这么做）。我们可以预先对静态文件进行压缩，然后直接提供给客户端，这样我们就避免了 Brotli 压缩效率低的问题，同时使用这个方式，我们可以使用压缩质量最高的等级去压缩文件，最大程度的去减小文件的大小。

另外，由于不是所有浏览器都支持 Brotli 算法，所以在服务端，我们需要同时提供两种文件，一个是经过 Brotli 压缩的文件，一个是原始文件，在浏览器不支持 Brotli 的情况下，我们可以使用 gzip 去压缩原始文件提供给客户端。

配置

一般我们都是 React 和 Vue 项目最终打包之后都是 html，css，js 这样的静态文件，部署的话一般都是使用 nginx 作为静态资源服务器。那么简单介绍一下 nginx 如何配置压缩。

配置：/etc/nginx/conf.d/default.conf

location ~ .*\.(html|js|css)$ {
    gzip on; #启用压缩
    gzip_min_length 1k;    #只压缩超过 1K 的文件
    gzip_http_version 1.1; #启用 gzip 压缩所需的 HTTP 最低版本
    gzip_comp_level 9;     #压缩级别，压缩比率越高，文件被压缩的体积越小
    gzip_types  text/css application/javascript;#进行压缩的文件类型
    root /data/www/html;
}

Google 都提供了 Brotli 的 Nginx 模块. 我们可以自行编译来加入对 Brotli 的支持.，整个过程和配置其他模块没有太大的区别，这里就简要地记录一下。

# 修改配置文件，参数和 Gzip 大致相同
brotli on;  
brotli_static off;  
brotli_types text/css application/javascript;  
brotli_buffers 4 16k;  
brotli_comp_level 6;  
brotli_window 512k;  
brotli_min_length 512;  

总结：性能优化有很多种方案，http 资源压缩就是其中的一种，压缩方式有很多种，目前主流的有 gzip 和 br 两种，br 是比较先进的压缩算法，存在浏览器兼容问题，但是压缩的文件更小。关于如何选择还是要根据你目前的开发环境来配置，如果你只要支持高版本 Chrome 浏览器，配置 br 来压缩 HTTP 资源是不错的选择。关于具体如何配置，上文已经讲解了 Nginx 的配置方案。