HTTP资源压缩

Posted 2021-04-26 前端精髓

减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。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# gzip compress deflate br identity *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的配置方案。

参考资料

[1] 使用Brotli提高网站访问速度: https://segmentfault.com/a/1190000009374437