杨绛先生说:“岁不声不响，你且不慌不忙。在凡俗的烟火里，愿以素心，阅来日方长。生活总是一地鸡毛，繁杂琐碎的日常，无力掌控的局面，以及猝不及防的变化，让日子多了几分慌张”。
市井长巷，聚拢起来是烟火，摊开来是人间;生活，远看是风景，近看才是人生。万事藏于心，而不表于情，有风听风，有雨看雨，生活并没有深意，幸福和遗憾都藏在日常里。所以，不慌不忙，不紧不慢，是一个成年人兵荒马乱日子之外的一点自由与安宁。
前言
通常我们都希望浏览网站网页的速度越快越好，这样也意味着，下载内容的数据越少越好。越少的数据量，会消耗更少的下载时间，就能让用户得到更快的网页载入。
根据 Google 的研究，超过40%的人在打开网页，等待了三秒钟后放弃了，而对于交易网站来说，每增加一秒钟的等待时间，就会降低7%的转换率。是的，每一秒钟都是非常重要的。
什么是br 压缩
同 gzip 类似， Brotli 也是一种压缩算法，由 Google 开发，对于文本压缩非常好。主要的特点就是它在服务器端和客户端都用到了词典，常见关键词和词组都有，这样可以获得更佳的压缩率。但 brotli 压缩速度比 Gzip 压缩慢，因此 gzip 可能更适合于压缩不可缓存的内容。
目前 Brotli已经获得各主流浏览器的支持。
怎样知道浏览器是否支持 Brotli？
当打开一个网页，然后在浏览器使用期开发工具的时候，可以查看其 content-encoding，如果看到 br 字样，那就是Brotli，如果看到 gzip，那就是用的 gzip 方式。
关于gzip 压缩
Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法，可将文件（译者注：快速地、流式地）压缩地更小，从而实现更快的网络传输。Web 服务器与现代浏览器普遍地支持 Gzip，这意味着服务器可以在发送文件之前自动使用 Gzip 压缩文件，而浏览器可以在接收文件时自行解压缩文件。
gzip vs br
根据某些文章的比较：
Javascript 文件用 Brotli 压缩可以比 gzip 的小14%。
HTML 文件会小21%。
CSS 文件会小17%
注意，图片之类的就不要在使用gzip或者 brotli 来压缩了，因为它们是已经压缩过的了。再压的话只会让文件更大。
较小的文件传输，不只是会让浏览器可以更快的载入，而且会让你的服务器节省带宽成本，或者 CDN 也会省一点。
尽管 Brotli 在压缩方面表现出色，但其优势是以其他代价为代价的。随着压缩级别的提高，Brotli 压缩所需的时间也会相应增加。换句话说，Brotli 需要更多的计算能力，这可能意味着更高的设备和软件成本。此外，Brotli 要求浏览器必须支持 HTTPS 才能使用。
gzip vs br压缩算法优劣对比
Brotli压缩与其算法压缩对比
下图来源于网络，从压缩比率和压缩时间来分析brotli、bzip2、gzip、xz这四种压缩算法，结果可想而知，brotli两者都位居首位
使用的前提
在 Chrome 中只有 https 的网站发起的请求头 Accept-Encoding 中才会加上 br 选项，此时服务端才会响应 brotli 压缩的资源。因此只有网站支持 https 时，开启 br 压缩才有价值。
使用 br 压缩
vite为例
1.安装插件
npm i -D vite-plugin-compression
2. 配置 vite.config.ts
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'brotliCompress',
ext: '.br',
}),
],
})
开启 br 压缩
1. 安装插件
npm i -D rollup-plugin-brotli
2. 配置 vite.config.ts
import { defineConfig } from 'vite'
import vue from 'vue'
import brotli from 'rollup-plugin-brotli'
export default defineConfig({
plugins: [
vue(),
brotli(),
],
})
webpack为例
1. 安装插件
npm i -D compression-webpack-plugin
2. 配置 webpack.config.ts
new CompressionPlugin({
filename: '[path][base].br',
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
})
Nginx 开启 br 压缩
1.下载 Brotli 的源码；
yum install git && cd /usr/local/src
git clone https://github.com/google/ngx_brotli.git
pushd ngx_brotli
git submodule update --init
popd
2.执行命令 nginx -v；
nginx version: nginx/1.16.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-36) (GCC)
built with OpenSSL 1.1.1c 28 May 2019
TLS SNI support enabled
configure arguments: --with-http_ssl_module --with-http_v2_module --with-http_sub_module --with-openssl=../openssl-1.1.1c
3.追加参数 --add-module=…/ngx_brotli，重新编译 Nginx。
cd nginx-1.16.1
./configure \
--with-http_ssl_module \
--with-http_v2_module \
--with-http_sub_module \
--with-openssl=../openssl-1.1.1c \
--add-module=../ngx_brotli
make && make install
如需执行平滑升级 (热部署)，make 之后请不要 make install：
mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.old
cp objs/nginx /usr/local/nginx/sbin/nginx
make upgrade
4.接着修改 nginx.conf
http {
# 启用 Brotli 压缩
brotli on;
# 设置 Brotli 压缩级别
brotli_comp_level 6;
# 设置启用压缩的最小文件大小
brotli_min_length 20;
# 指定要压缩的文件类型
brotli_types text/plain text/css application/javascript;
# 配置 Brotli 压缩的缓冲区大小
brotli_buffers 16 8k;
# 其他的 Nginx 配置项...
}
5.重载 Nginx，检验效果。
nginx -t && nginx -s reload
扩展
Brotli-G 对标准 Brotli 比特流格式的修改
允许使用 GPU 和多线程 CPU 进行高效的数据并行解压缩，同时仍保持相对较高压缩率
最后
在默认参数下， brotli 压缩方式有更好的压缩率，但是在参数调优的情况下，差距变小。
github地址：
https://github.com/google/ngx_brotli#brotli_ratio
https://github.com/google/brotli
