likes
comments
collection
share

嘿！你的项目开启了Brotli压缩了吗？

作者站长头像
站长
· 阅读数 3

什么是 Brotli 压缩？

  Brotli 最初由 Google 开发用于 woff2 使用，后来扩展到更广泛的应用，是一种高效的压缩算法。它提供的压缩率可与当今最好的通用压缩方法相媲美。Brotli 引入了 11 个压缩质量级别，范围从 0到 11。随着质量级别的提高，压缩率也会提高。

  但是，需要注意的是，较高的压缩级别会影响压缩速度。随着 Brotli 的广泛采用，所有现代 Web 浏览器都支持 Brotli，大约 96.6%的用户使用支持 Brotli 的浏览器。

嘿！你的项目开启了Brotli压缩了吗？

  使用 Brotli 压缩的 JavaScript 文件大约缩小了 15%，HTML 文件缩小了大约 20%，CSS 文件缩小了大约 16%。 [来源]

Brotli 的局限性

  与 GZIP 相比，Brotli 的浏览器支持有限，尽管 Chrome、Firefox 和 Opera 等主要浏览器确实支持它。另一个缺点是与 GZIP 相比，Brotli 需要更长的时间来压缩文件。 尽管有其优点，但在决定是否使用 Brotli 压缩时考虑这些限制非常重要。

GZIP 相对于 Brotli 的优势

  虽然 Brotli 提供了令人印象深刻的压缩能力，但 GZIP 在特定场景下仍然具有一定的优势。以下是 GZIP 相对于 Brotli 的一些优点：

  • 兼容性： GZIP 自 20 世纪 90 年代以来已被广泛使用，几乎所有浏览器和 Web 服务器都支持。它已成为一种标准压缩格式，确保跨各种平台的广泛兼容性。
  • 成熟的生态系统： GZIP 拥有完善的生态系统，拥有丰富的工具和库可供实施。它在行业中的长期存在使得不同软件环境中的集成和工作变得更加容易。
  • 压缩速度： 与 Brotli 相比，GZIP 通常具有更快的压缩速度。它可以快速压缩文件，适合速度优先的场景。
  • 降低服务器负载： Cloudflare 的 Brotli 压缩在其边缘网络上执行，而不是在您的源服务器上执行。这意味着压缩是在 Cloudflare 的服务器上完成的，而不是您的服务器上。因此，通过 Cloudflare 使用 Brotli 压缩不会耗尽服务器的资源。这是使用 Cloudflare 等内容交付网络 (CDN) 的优势之一，因为它将压缩等任务从您的服务器卸载到他们的服务器，从而释放服务器上的资源。
  • 支持流媒体： GZIP 非常适合流媒体场景，其中数据被压缩并实时传送。它的兼容性和对流应用程序的支持使其成为某些用例的首选。

  值得一提的是，GZIP 最初是为压缩文件而设计的，后来适应于压缩流以适应 Web 应用程序。相比之下，Brotli 从一开始就专门设计用于压缩流，使其成为 Web 服务器在将内容流式传输到浏览器之前压缩内容时的更优化选择。

采用镜像地址

镜像地址：hub.docker.com/r/georgjung…

FROM georgjung/nginx-brotli:1.25-alpine

# 将当前目录下的所有文件复制到工作目录下
COPY dist/ /usr/share/nginx/html/

# 拷贝 Nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf

Docker Pull Command

docker pull georgjung/nginx-brotli:1.25-alpine

本地调试【docker】

编写 Dockerfile：

# 使用官方的 Nginx 镜像作为基础镜像
# FROM nginx:latest
FROM georgjung/nginx-brotli:1.25-alpine

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 将当前目录下的所有文件复制到工作目录下
COPY ./dist /usr/share/nginx/html

# 拷贝 Nginx 配置文件
COPY ./nginx.conf /etc/nginx/nginx.conf

# 暴露 80 和 443 端口
EXPOSE 80 443

# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]

构建镜像：

// 打包本地 以demo2 为名称的包
docker build -t demo2 .

运行容器：

// 启动 docker同时以 8888 端口代理 80端口，进行调试
// demo1： 容器；demo2 : 镜像
docker run -d -p 8888:80 --name demo1  demo2

一般配置

以下是通用配置，需要自定义配置的，可以参考相关的文档


worker_processes  auto;
#静态模块：允许 Nginx 在服务器端对静态文件进行 Brotli 压缩，例如 HTML、CSS、JavaScript 等文件。
load_module modules/ngx_http_brotli_static_module.so;
# 过滤器模块：允许 Nginx 在服务器端对动态生成的内容进行 Brotli 压缩，例如动态生成的网页内容、API 响应等。
load_module modules/ngx_http_brotli_filter_module.so;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    # 开启gzip压缩
    gzip on;
    # 支持的mime类型
    gzip_types *;
    # 在响应头中添加 Vary:Accept-Encoding
    gzip_vary on;
    # 当请求头中的属性字段 User-Agent 的内容与指令值正则匹配时关闭 gzip 压缩功能
    gzip_disable "MSIE [1-6].(?!.*SV1)";
    # 压缩级别 0-9
    gzip_comp_level 9;

    # 开启brotli压缩
    brotli on;
    # 配置静态编译网页
    brotli_static on;
    # 支持的mime类型
    brotli_types *;
    # 压缩级别 0-11
    brotli_comp_level 11;

    server {
        listen       80;
        # server_name  localhost;
        root   /usr/share/nginx/html;

        location /demo {
            alias /usr/share/nginx/html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

本地测试

以下全部以无痕的模式进行测试

压缩等级

Brotli

level：1

嘿！你的项目开启了Brotli压缩了吗？

level：6 (默认值)

嘿！你的项目开启了Brotli压缩了吗？

level：11 （最高等级）

嘿！你的项目开启了Brotli压缩了吗？

从以上的压缩等级来看，拿其中一个文件作为参考「JQ4.0.0-beta.js」 ;

原始SIZE: 257 KB

  • Level 1 : 97.7KB ；下降了大约62.6%
  • Level 6（默认值） : 71.0KB ；下降了大约72.5%。
  • Level 11 : 63.0KB；下降了大约75.45%。

Gzip

相关的配置文档：：Module ngx_http_gzip_module

level：1 （默认值）

嘿！你的项目开启了Brotli压缩了吗？

level：4

嘿！你的项目开启了Brotli压缩了吗？

level： 9 （最高等级）

嘿！你的项目开启了Brotli压缩了吗？

从以上的压缩等级来看，拿其中一个文件作为参考「JQ4.0.0-beta.js」 ;

原始size: 257 KB

  • Level 1 （默认值）: 92.4KB ；下降了大约64.27%。

  • Level 4 : 79.7KB ；下降了大约68.96%。

  • Level 9（最高等级） : 75.5KB；下降了大约70.55%。

结论：综上所述，Brotli比Gzip压缩整体下降了6.8%左右

生产环境压缩测试

Brotli压缩

嘿！你的项目开启了Brotli压缩了吗？

gzip压缩

嘿！你的项目开启了Brotli压缩了吗？

其中一个文件作为参考「JQ4.0.0-beta.js」 ; 同时开启最高压缩；

Brotli压缩 下降了75.33%；gzip压缩下降了70.6%

镜像参考

地址如下：hub.docker.com/r/fholzer/n…

嘿！你的项目开启了Brotli压缩了吗？

注意：

Brotli 或 gzip 不应用于 JPEG、PNG、MP4 等二进制文件。

参考链接：serverfault.com/questions/9…

嘿！你的项目开启了Brotli压缩了吗？

  通过一些nginx的三方插件可以进行压缩ngx_http_image_filter_module 进行压缩，但是不管是 gif,jpg,png,ico格式，都是对图片做了有损压缩，

  也就是说，这些格式本来就是已经压缩过的格式，再进行gzip压缩，也不会有啥明显效果，而且还消耗服务器的CPU。所以，一般都不会对图片，视频，音频这些类型的文件做gzip压缩。gzip一般只对 html，js，css之类的文本有效果，而对已经压缩过了的图片如 gif,jpg 等是没有效果的，甚至会适得其反；参考：图片要启用gzip压缩吗(绝对不要)

嘿！你的项目开启了Brotli压缩了吗？

关于图片压缩

  其实很多的时候对于图片的处理都是基于CDN，利用CDN转换的能力进行当前的图片的压缩和转换等，比较常见的可能是阿里云OSS 大家有兴趣可以了解一下~

阿里云 OSS参数预览：

嘿！你的项目开启了Brotli压缩了吗？

最后

  网上说的brotli能在gzip压缩14%,（如下图）也不知道是不是我配置的有问题？至少我在本地docker、服务器同时测试结果：7%~8% ； 有兴趣的小伙伴可以试试哦~ 好了！如果大家感兴趣的话 欢迎点赞收藏哈~

嘿！你的项目开启了Brotli压缩了吗？

参考