前端网站优化-Brotli 压缩

杨绛先生说:“岁不声不响，你且不慌不忙。在凡俗的烟火里，愿以素心，阅来日方长。生活总是一地鸡毛，繁杂琐碎的日常，无力掌控的局面，以及猝不及防的变化，让日子多了几分慌张”。
市井长巷，聚拢起来是烟火，摊开来是人间;生活，远看是风景，近看才是人生。万事藏于心，而不表于情，有风听风，有雨看雨，生活并没有深意，幸福和遗憾都藏在日常里。所以，不慌不忙，不紧不慢，是一个成年人兵荒马乱日子之外的一点自由与安宁。

前言

通常我们都希望浏览网站网页的速度越快越好，这样也意味着，下载内容的数据越少越好。越少的数据量，会消耗更少的下载时间，就能让用户得到更快的网页载入。

根据 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