Brotli可使HTML、CSS、JS等文本资源压缩率比Gzip再降15%–25%，实测Vue3+TS的chunk文件从148KB压至112KB；关键在于构建预压缩（生成.br文件+Nginx brotli_static on）或动态压缩（启用ngx_brotli模块并配置brotli on、comp_level 6、types及关闭gzip冗余），最终需通过curl或DevTools验证Content-Encoding: br响应头。
直接用 Brotli 替代 Gzip，对 HTML、CSS、JS 等文本类资源压缩率能再降 15%–25%，实测 Vue3 + TypeScript 的 chunk 文件从 148KB（Gzip）压到 112KB（Brotli），省下 36KB。关键不是“能不能压”，而是“怎么压得稳、传得对、浏览器真解得开”。
构建阶段预压缩：推荐给绝大多数前端项目
在打包时生成 .br 文件，Nginx 直接返回，零运行时开销，解压快，最稳妥。
- 用 vite-plugin-compression（Vite 项目）：配置 algorithm: 'brotliCompress'，ext: '.br'，threshold 设为 10240（即 ≥10KB 才压）
- Webpack 用户可用 compression-webpack-plugin，设置 algorithm: 'brotliCompress'
- 确保输出目录（如 dist）里同时存在
app.js和app.js.br—— Nginx 的brotli_static on就靠这个匹配
Nginx 动态压缩：适合动态内容或无法预压缩的场景
不依赖构建产物，实时压缩响应体，但消耗 CPU，且只对未压缩的原始响应生效（不会二次压缩 .gz/.br 文件）。
- 确认已加载
ngx_brotli模块：nginx -V 2>&1 | grep brotli有输出才算成功 - 在
http块中写全配置：brotli on、brotli_comp_level 6（平衡点）、brotli_types必须包含application/javascript、text/css、image/svg+xml等实际用到的类型 - 加一句
brotli_static on，让 Nginx 优先找同名 .br 文件；若没找到，再走动态压缩路径
必须关闭 gzip 冗余压缩
现代浏览器发请求时 header 带 Accept-Encoding: br,gzip，Nginx 默认会尝试两个压缩链路，造成浪费。
- 直接写
gzip off最干脆（极少数旧浏览器可忽略） - 或缩小 gzip 范围，例如只留
gzip_types text/plain，专供不支持 Brotli 的客户端兜底 - 别忘了重启 Nginx：
nginx -s reload
验证是否真正生效
别只看文件体积，要确认浏览器收到的是带 Content-Encoding: br 的响应。
- 命令行验证：
curl -H "Accept-Encoding: br" -I https://yoursite.com/app.js，响应头含Content-Encoding: br且状态码 200 即成功 - Chrome DevTools → Network → 点开某个 JS/CSS 请求 → Headers → Response Headers 查看
- 注意：如果返回的是 304 或从内存缓存读取，可能看不到 encoding，换无缓存请求或清缓存重试
