宝塔Nginx配置br和gzip的处理方式

前言

由于最近研究了下br和gzip的配置，个人对于这个压缩处理推荐的逻辑是这样的：

当访问的资源本地存在br文件的时候，优先使用br，br不存在的时候，访问gz文件，如果gz还不存在，就走默认资源处理或者返回源文件

那么这套该怎么配置呢？

教程

全局nginx配置：

gzip on;
gzip_static on;
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

# brotli
brotli on;
brotli_static on;   
brotli_comp_level 1;
brotli_buffers 16 8k;
brotli_min_length 20;
brotli_types text/xml text/plain text/css application/javascript application/x-javascript application/rss+xml text/javascript image/tiff image/svg+xml application/json application/xml;

这是和宝塔官方配置差不多的一套，但是这样写会有一个问题，当本地资源br和gz都不存在时，并不会直接返回源文件，它会触发br的动态压缩处理，当然也有办法解决这个问题，我的做法就是简单粗暴：

gzip on;
gzip_static on;
# gzip_min_length  1k;
# gzip_buffers     4 16k;
# gzip_http_version 1.1;
# gzip_comp_level 2;
# gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
# gzip_vary on;
# gzip_proxied   expired no-cache no-store private auth;
# gzip_disable   "MSIE [1-6]\.";

# brotli
brotli on;
brotli_static on;   
# brotli_comp_level 1;
# brotli_buffers 16 8k;
# brotli_min_length 20;
# brotli_types text/xml text/plain text/css application/javascript application/x-javascript application/rss+xml text/javascript image/tiff image/svg+xml application/json application/xml;

把针对文件的处理全部注释掉。

网站nginx配置

然后我们再去网站的nginx配置里添加如下内容：

location ~* \.(js|css)$ {
    root /path/to/files;
    try_files $uri.br $uri.gz $uri =404;
}

这样当用户访问js和css资源的时候，会先br，在gz，没有就源文件。

测试

当我们去查看真实的返回资源时，你会发现本地文件大小和浏览器展示的大小有一丢丢的不同，其原因就是因为我们windows的size大小是以1024字节（二进制）计算的，而浏览器是1000字节（十进制）计算的，这就导致浏览器的会大一些。

假设我们现在存在一个645kb的br文件，他在浏览器中加载时显示的大小是662kb；

换算如下：

总字节数：661389
浏览器展示大小：661389 / 1000 = 661.389 ≈ 662kb;

可以看到浏览器确实是十进制，并且采用的是向上取整。

除了查看字节数来确认配置是否生效外，我们还可以查看文件头信息Last-Modified字段，他返回的是修改时间，我们可以和本地文件的修改时间做比对来进行确认。

注意头信息的Last-Modified字段时间是UTC时间，自己用js的Date可以转成本地时间进行比对。