Nginx 中启用 Brotli 压缩可比 Gzip 多压缩 17%–26%，显著提升首屏性能；需通过 ngx_brotli 模块支持，配置 brotli on、合理 comp_level 与 types，并关闭冗余 gzip。
在 Nginx 中启用 Brotli 压缩，是当前降低文本类静态资源（HTML、CSS、JS、SVG、JSON 等）传输体积最有效的手段之一。相比 Gzip，Brotli 平均可多压缩 17%–26%，尤其对首屏关键资源效果显著——这意味着更少字节下载、更快解码、更早触发渲染，首屏时间（FCP/LCP）通常能缩短 300–800ms。
确认并加载 ngx_brotli 模块
Brotli 不是 Nginx 内置功能，必须通过第三方模块 ngx_brotli 支持：
- 运行
nginx -V 2>&1 | grep -o ngx_brotli，有输出说明已加载；无输出则需补充安装 - 推荐方式：使用预编译镜像（如
tiangolo/nginx-brotli）、Cloudflare 官方 Nginx 构建版，或 Docker 环境直接拉取含模块的镜像 - 源码编译用户需在
./configure时添加--add-module=/path/to/ngx_brotli，并确保子模块已初始化（git submodule update --init）
在 http 块中正确配置 Brotli 参数
所有配置统一写在 nginx.conf 的 http{...} 块内，无需重复到每个 server 或 location：
-
brotli on;—— 全局开启，仅对请求头含Accept-Encoding: br的客户端生效 -
brotli_comp_level 6;—— 推荐值，压缩率与 CPU 开销较均衡（范围 1–11，过高（如 11）会明显增加 TTFB） -
brotli_min_length 20;—— 小于 20 字节的响应不压缩，避免无效开销 -
brotli_types text/plain text/css text/javascript application/javascript application/json application/xml+rss text/xml font/opentype image/svg+xml;—— 显式列出关键 MIME 类型，务必包含application/javascript和image/svg+xml，漏掉会导致 JS/CSS 未压缩
协同处理 Gzip，避免冗余压缩
Brotli 和 Gzip 可共存，但默认配置下可能造成双倍判断开销：
- 现代浏览器（Chrome/Firefox/Safari/Edge）均支持 Brotli，且优先选择
br编码，因此可安全关闭 Gzip 对同类资源的压缩：gzip off; - 若需兼容极旧客户端（如 IE11 或部分嵌入式 WebView），可保留 Gzip，但大幅缩小其作用范围：
gzip_types text/plain;，仅保障基础文本兜底 - 注意不要同时对同一资源启用两种压缩，否则 Nginx 可能反复执行编码逻辑，徒增 CPU 负担
验证是否真正生效
重启 Nginx 后，用真实请求确认结果：
- 命令行测试：
curl -H "Accept-Encoding: br" -I https://yoursite.com/app.js，检查响应头是否含Content-Encoding: br且状态为200 - 浏览器验证：打开 DevTools → Network → 刷新页面 → 点击任意 JS/CSS 文件 → Headers 标签页查看
Content-Encoding和Content-Length，对比未开启 Brotli 时的大小 - 注意：Brotli 只压缩原始响应体，不会处理已存在的
.br或.gz文件；确保你部署的是未压缩的原始静态文件（如main.js，而非main.js.br）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
