nginx和vite配置Brotli

2023-02-12

关于Brotli

Google 认为互联网用户的时间是宝贵的，他们的时间不应该消耗在漫长的网页加载中，因此在 2015 年 9 月 Google 推出了无损压缩算法 Brotli。Brotli 通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩，与其他压缩算法相比，它有着更高的压塑压缩效率。关于Brotli详细介绍可点击这里。

vite配置

我们编译文件的时候可以事先生成.gz和.br后缀的文件, 然后开启static就可以使nginx降低每次请求的负载.

首先安装插件vite-plugin-compression

1	yarn add -D vite-plugin-compression

打开vite.config.ts, 添加plugins, 我这里配置同时生成gz和br文件

import viteCompression from 'vite-plugin-compression';
...
export default defineConfig({
  plugins: [
    // ...,
    viteCompression({
      ext: '.gz',
      deleteOriginFile: false,
    }),
    viteCompression({
      ext: '.br',
      algorithm: 'brotliCompress',
      deleteOriginFile: false,
    }),
  ],
});

vite配置完毕了, yarn build即会生成我们所需文件

Nginx配置

nginx自1.9.11以后版本后支持动态模块，自此，给nginx添加模块再也不用重新编译nginx了，通过动态模块，你可以在运行时有有选择性的加载第三方或Nginx官方模块。新的实现方式通过API模块保持尽可能的向后兼容。

不过我们还是需要下载nginx源码编译模块.

下载Brotli, Nginx源码

1	首先请确保服务器安装了`Git`并且在`GitHub`配置了服务器公钥

google/ngx_brotli 从 16年12月的版本起，开始内置google/brotli，所以我们不需要额外编译bagder/libbrotli库，让安装变得简单起来。我们将google/ngx_brotli下载并解压到/usr/src/ngx_brotli目录

1 2	cd /usr/src git clone https://github.com/google/ngx_brotli.git

然后在下载google/brotli并解压到/usr/src/ngx_brotli/deps/brotli

1
2
3

cd /usr/src/ngx_brotli/deps && rm -rf brotli
git clone git@github.com:google/brotli.git
cd /usr/src/ngx_brotli && git submodule update --init

下载Nginx

请下载与当前nginx版本相同的nginx安装包。nginx官方下载地址：http://nginx.org/en/download.html。这里假设当前服务器nginx是1.20.1版本。

可通过命令，获取当前nginx版本

nginx -v

下载nginx安装包

1 2	cd /usr/src wget http://59.80.44.46/nginx.org/download/nginx-1.20.1.tar.gz

解压安装包

1	tar -xvf nginx-1.14.2.tar.gz

编译动态模块

先进入解压后的nginx安装包目录，配置configure，然后用make modules。

1
2
3

cd nginx-1.14.2
./configure --with-compat --add-dynamic-module=/usr/src/ngx_brotli
make modules

我的服务器./configure配置的时候报错, 缺少一些库. 这里放最后说

等运行完成后，查看编译好的模块

1	ls objs/*.so

输出：

1	objs/ngx_http_brotli_filter_module.so objs/ngx_http_brotli_static_module.so

将编译好的模块文件复制到nginx动态模块加载目录(我这里nginx配置目录在/etc/nginx目录下)

1	cp objs/{ngx_http_brotli_filter_module.so,ngx_http_brotli_static_module.so} /etc/nginx/modules

注册Brotli模块

为了方便管理nginx动态模块，建议新建一个modules.conf文件，单独管理动态模块。

1	为了方便管理nginx动态模块，建议新建一个modules.conf文件，单独管理动态模块。

在/etc/nginx/nginx.conf配置文件里引入modules.conf文件，找到以下内容并修改：

1 2	* pid /var/run/nginx.pid; + include /etc/nginx/modules.conf;

打开/etc/nginx/modules.conf，注册刚才编译好的 Brotli 模块。

1
2
3

# Brotli模块配置
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Nginx启用Brotli

Brotli和gzip是可以并存的，无需关闭gzip。

在/etc/nginx/nginx.conf开启Brotli：

http {
  ...
  # 开启gzip
  gzip on;
  # 开启gzip_static
  # gzip_static 开启后可能会报错，需要安装相应的模块, 具体安装方式可以自行查询
  # 只有这个开启，文件打包的.gz文件才会有效果，否则不需要开启gzip进行打包
  gzip_static on;
  gzip_proxied any;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  #如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types *;
  gzip_vary off;
  gzip_disable "MSIE [1-6]\.";
  # 开启 brotli压缩
  # 需要安装对应的nginx模块,具体安装方式可以自行查询
  # 可以与gzip共存不会冲突
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  # 只有这个开启，文件打包的.br文件才会有效果，否则不需要开启brotli进行打包
  brotli_static on;
  brotli_types text/plain application/javascript text/css text/javascript application/json application/octet-stream image/jpeg image/gif image/png;
  ...
}

重启nginx，使其配置生效, 但是重启之前最好先检查配置是否正确

1 2	nginx -t # 确保检查配置正确后再重启哟 nginx -s reload

1	Brotli 压缩只能在https中生效，因为在 http 请求中 request header 里的 Accept-Encoding: gzip, deflate 是没有 br 的。

清理源码等临时文件

1	rm -rf /usr/src/*

无法配置Nginx模块

nginx依赖pcre, zlib , openssl这些库, 确保服务器已经安装才能配置

可以下载源码解压安装或者直接使用包管理器安装

源码安装

下载源码安装也需要先安装了c和c++编译模块

1	yum install -y gcc gcc-c++

然后就是统一的下载源码包, 解压, 编译咯

wget https://source.io/sourcename.tar.gz
tar -zxvf sourcename.tar.gz
cd sourcename
./configure
make && make install

包管理

PCRE

1	yum install -y pcre pcre-devel

zlib

1	yum install -y zlib zlib-devel

openssl

1	yum install openssl -y

安装完成之后应该就可以./configure了

压缩速率

我服务器上一个827kb的wasm二进制文件, 经过了Brotli处理只需要传输269kb

文件	原大小	Gzip	Brotli
pngtiny-custom.wasm	826816	369478	268498
index.js	74019	28071	25015
peach.js(包含base64的图片)	60897	45031	44278
api接口	209kb	31.2kb	23.0kb

可见Brotli相比Gzip还是有所提升的, 特别是数据接口上压缩率最好, 当然对于已经压缩过的图片大家压缩都不太行, 如果并发挺大还是配合vite插件做上静态文件部署, 对于服务器和带宽都释放了很多压力啊.