brotli_static实现高性能静态资源分发的核心是构建时预压缩、运行时零计算、浏览器秒解压：需在构建阶段生成匹配MIME类型的.br文件，Nginx中配置brotli_static on/always、完整brotli_types并关闭gzip，确保ngx_brotli模块加载且路径权限正确，再配合哈希指纹与immutable缓存策略。
用 brotli_static 实现高性能静态资源分发，核心是“构建时压好、运行时零计算、浏览器秒解压”。它不走实时压缩链路，而是让 Nginx 直接读取预生成的 .br 文件返回，彻底规避 CPU 开销和首字节延迟，特别适合 HTML、CSS、JS、SVG 等文本类关键资源。
构建阶段：生成可靠的 .br 文件
预压缩必须在打包环节完成，确保每个可压缩文件都有对应 .br 副本，且 MIME 类型匹配。
- Vite 项目推荐使用
vite-plugin-compression，配置algorithm: 'brotliCompress'、ext: '.br'、threshold: 10240（≥10KB 才压），避免小文件得不偿失 - Webpack 用户可用
compression-webpack-plugin，同样设algorithm: 'brotliCompress'，输出目录中必须同时存在main.js和main.js.br - 纯静态站点可用 CLI 批量处理：
find dist -type f \( -name "*.js" -o -name "*.css" -o -name "*.html" -o -name "*.svg" \) -exec brotli {} \;，注意保留原始文件权限与时间戳
Nginx 配置：精准启用 brotli_static
该指令不是“开关”，而是一套查找+回退机制，必须配合完整参数才能稳定生效。
- 在
http{}块中统一写入：brotli_static on;（或更严格的brotli_static always;） - 必须声明支持的类型：
brotli_types text/html text/css application/javascript image/svg+xml application/json;，漏掉text/html就会导致首页不走 Brotli - 务必关闭冗余 gzip：
gzip off;，否则现代浏览器可能触发双判断逻辑，徒增 TTFB - 验证是否命中：用
curl -H "Accept-Encoding: br" -I https://yoursite.com/app.js，响应头应含Content-Encoding: br且Content-Length明显小于未压缩版本
协同优化：让 .br 文件真正被用起来
光有文件和配置还不够，需确保整个链路无断点。
- 确保 Nginx 已加载
ngx_brotli模块：nginx -V 2>&1 | grep brotli有输出才算成功；若无，需换用预编译镜像（如tiangolo/nginx-brotli）或重编译 - 静态资源路径要可访问：Nginx 的
root或alias必须指向包含.br文件的物理目录，且文件权限允许 Nginx 读取 - 搭配缓存策略：对带哈希指纹的
.js.br文件设置Cache-Control: public, max-age=31536000, immutable，让浏览器长期复用，不发起任何验证请求 - 不建议混合使用
brotli_static和动态压缩：二者共存易引发逻辑冲突；若需兜底，仅对极旧客户端开启极窄范围的gzip_types text/plain;
这套方案把压缩工作从请求时挪到构建时，服务端只做文件查找与响应，既节省 CPU，又保障解压一致性。实测 Vue3 项目 chunk 从 148KB（Gzip）降至 112KB（Brotli），首屏资源加载快 20% 以上。
