如何配置 brotli 压缩算法实现在相同压缩比下优于 Gzip 的前端加载体验-Nginx-PHP中文网

关键在于分层协同：构建阶段预生成.br文件避免运行时开销，服务端nginx通过brotli_static always优先返回预压缩文件并保留gzip兜底，且仅在https下生效。

如何配置 brotli 压缩算法实现在相同压缩比下优于 gzip 的前端加载体验

要让 Brotli 在相同压缩比下真正带来优于 Gzip 的前端加载体验，关键不在“压得更狠”，而在于精准匹配传输链路与客户端能力：Brotli 更小的体积必须被浏览器正确识别、服务端稳定交付、且不因压缩过程拖慢构建或响应。它不是简单替换 Gzip，而是分层协同的优化策略。

构建阶段：预压缩静态资源（.br 文件）

生产构建时生成 .br 文件，避免运行时实时压缩开销，兼顾速度与体积。Vite 项目推荐使用 vite-plugin-compression 并启用 Brotli：

安装插件：yarn add vite-plugin-compression -D

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';<br>import compression from 'vite-plugin-compression';<br><br>export default defineConfig({<br>  plugins: [<br>    compression({<br>      algorithm: 'brotliCompress', // 启用 Brotli<br>      ext: '.br',<br>      threshold: 1024, // ≥1KB 才压缩<br>      deleteOriginFile: false<br>    })<br>  ]<br>});

执行 yarn build 后，dist 目录中会同时存在 index.js 和 index.js.br 等文件

服务端阶段：Nginx 同时支持 .br 文件和动态 Brotli

Nginx 需通过 ngx_brotli 模块支持两种模式：优先返回已存在的 .br 文件（最快），无文件时再动态压缩（兜底）。配置要点如下：

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

确保 Nginx 已编译安装 ngx_brotli 模块（需重新编译，宝塔用户可勾选“自定义模块”安装）

在 http 块中添加：

brotli on;<br>brotli_static always;  # 优先查找 .br 文件<br>brotli_comp_level 6;<br>brotli_min_length 512;<br>brotli_types text/plain text/css application/json application/javascript image/svg+xml;

保留原有 gzip on 配置——Brotli 与 Gzip 共存，老旧浏览器自动降级

协议与兼容性：HTTPS 是硬性前提

Brotli 的 Accept-Encoding: br 请求头仅在 HTTPS 下由浏览器主动发送；HTTP 环境中浏览器不会声明支持，服务端也就不会返回 br 编码响应。

检查你的站点是否强制 HTTPS（如通过 HSTS 或 301 重定向）
在 Chrome DevTools 的 Network 面板中，任一 JS/CSS 请求的 Response Headers 查看是否有 content-encoding: br
若没有，先确认证书有效、协议跳转正常，再排查 Nginx 配置是否生效