【实战】Brotli推荐，一步步带你搞定

Brotli 是由 Google 开发的现代文本压缩算法，相比传统的 Gzip，它通常能将 HTML、CSS、JavaScript 等文本资源的体积再减小 15%~30%，同时解压速度更快。

结合你之前关注的 Web 开发和服务器配置，以下是关于 Brotli 的落地推荐与实战指南：

核心推荐：哪些资源该用 Brotli?

Brotli 并非万能，它主要针对文本类资源效果最佳。

强烈推荐开启的资源类型：

HTML 页面

JavaScript 文件

CSS 样式表

SVG 图标

JSON / XML / CSV / TXT 数据文件

字体文件(.woff2)

不适用类型：

JPG / PNG / WebP / MP4 / PDF(这些格式本身已经过压缩，使用 Brotli 二次压缩不仅无效，反而会浪费 CPU 资源)。

 实战配置推荐：Nginx 启用 Brotli

在 Nginx 中启用 Brotli 是目前最主流的方案。需要注意的是，Nginx 官方主线版本不原生支持 Brotli，需要集成 ngx_brotli 模块。

1. 确认模块已加载

在终端执行以下命令，检查 Nginx 是否已编译 Brotli 模块：

bash

编辑

1nginx -V 2>&1 | grep -o ngx_brotli

如果有输出，说明模块已就绪;如果没有，则需要重新编译 Nginx 并添加该模块。

2. 推荐配置(放入 nginx.conf 的 http 块中)

nginx

编辑

1# 开启 Brotli 压缩

2brotli on;

3

4# 压缩级别推荐 4~6(平衡 CPU 消耗与压缩率，不建议设到 9 以上)

5brotli_comp_level 6;

6

7# 开启静态文件预压缩支持(如果构建时生成了 .br 文件)

8brotli_static on;

9

10# 指定需要压缩的 MIME 类型

11brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml font/woff2;

12

13# 设置最小压缩长度，避免压缩过小的文件

14brotli_min_length 256;

3. 与 Gzip 共存

Brotli 和 Gzip 可以完美共存。现代浏览器会自动优先选择 Brotli(Accept-Encoding: br)，而不支持的老浏览器会自动回退到 Gzip，无需手动关闭 Gzip。

 进阶推荐：构建工具预压缩

对于前端项目(如 React、Vue)，强烈推荐在构建阶段直接生成 .br 预压缩文件，而不是依赖服务器实时压缩。这样 Nginx 只需直接返回文件，零 CPU 开销。

Vite 项目：使用 vite-plugin-compression，配置 algorithm: 'brotliCompress'。

Webpack 项目：使用 compression-webpack-plugin，配置 algorithm: 'brotliCompress'。

 验证是否生效

配置完成后，可以通过以下两种方式验证：

命令行验证：bash

编辑

1curl -H "Accept-Encoding: br" -I https://你的域名.com/script.js

如果返回的响应头中包含 Content-Encoding: br，即表示生效。

浏览器验证：

打开 Chrome DevTools → Network 面板 → 点击某个 JS/CSS 请求 → 查看 Response Headers 中是否包含 content-encoding: br。

 总结建议

个人站/CMS：如果服务器性能有限，建议将 brotli_comp_level 设为 4-5，避免高并发时 CPU 过载。

前后端分离项目：务必在构建阶段生成 .br 文件，并开启 brotli_static on，这是性能最优解。

CDN 用户：如果你使用了 Cloudflare 或阿里云 CDN，通常可以在控制台一键开启 Brotli，无需在源站额外配置。