如何在Nginx配置中为引入的CSS文件开启Gzip或Brotli压缩？-css教程-PHP中文网

nginx必须编译集成对应模块才真正支持gzip或brotli，仅配置指令无效；验证需用nginx -v检查with-http_gzip_module或with-http_brotli_module输出，且brotli仅在https下通过accept-encoding: br协商生效。

如何在nginx配置中为引入的css文件开启gzip或brotli压缩？

确认 Nginx 是否真正支持 gzip 或 brotli

光写 gzip on 或 brotli on 没用，Nginx 二进制文件里必须真有对应模块。否则配置会被忽略，nginx -t 可能报 unknown directive "brotli"，或压根不返回 Content-Encoding 头。

验证方式统一用：
nginx -V 2>&1 | grep -o with-http_gzip_module → 有输出才代表 gzip 可用
nginx -V 2>&1 | grep -o with-http_brotli_module 或 ngx_brotli → 有输出才代表 brotli 可用

没输出？说明当前 Nginx 是精简版、宝塔一键安装版或旧版本，必须重新编译并带上对应 --with-http_gzip_module 或 --add-module=/path/to/ngx_brotli
gzip_static 和 brotli_static 是独立模块，不能替代基础压缩能力
Brotli 在 HTTP 站点下不会生效——客户端只在 HTTPS 下发 Accept-Encoding: br，HTTP 请求里根本不会带这个头

必须显式声明 text/css 类型才能压缩 CSS 文件

Nginx 的 gzip_types 和 brotli_types 默认都不含 text/css，漏掉它，CSS 就永远不压缩——哪怕你开了 gzip on，也只会压 text/html。

正确写法（放在 http { } 块内，不是 server 或 location）：

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

gzip on;
gzip_types text/plain text/css application/javascript application/json text/xml image/svg+xml;
brotli on;
brotli_types text/plain text/css application/javascript application/json text/xml image/svg+xml;

text/css 必须手写进去，大小写敏感，不能写成 text/CSS 或 css
别往里面加 image/jpeg、font/woff2 这类已压缩格式，徒增 CPU 负担且体积不变甚至变大
gzip_min_length 1024 和 brotli_min_length 20 是防小文件越压越大的关键，尤其对构建工具生成的微型 CSS（如 Tailwind 的 inline 样式提取）

验证 CSS 是否真被压缩，而不是“看起来配了”

配置改完不等于生效。得看真实响应头：
curl -I -H "Accept-Encoding: gzip" https://yoursite.com/style.css → 应含 Content-Encoding: gzip
curl -I -H "Accept-Encoding: br" https://yoursite.com/style.css → 应含 Content-Encoding: br

没 Content-Encoding？大概率是 gzip_types/brotli_types 漏了 text/css，或配置不在 http 块
有头但 Content-Length 几乎没变？说明文件小于 min_length，被跳过了
Chrome DevTools Network 里显示 from memory cache？那是缓存了未压缩的老版本，清掉缓存或临时加 Cache-Control: no-cache 再试
HTTP/2 下 Brotli 和 Gzip 不叠加，浏览器按 Accept-Encoding: br,gzip 顺序选第一个可用的——所以 brotli on 放在 gzip on 前面更稳妥

Brotli 和 Gzip 共存时容易踩的坑

两者可以共存，但不是“自动兜底”，而是靠 Nginx 模块优先级和客户端请求头决定用哪个。常见误操作直接让压缩失效：

没关 gzip 却开了 brotli：某些旧版 ngx_brotli 会与 gzip 冲突，导致两个都失效；稳妥做法是明确写 gzip off（如果只想要 Brotli）
把 brotli on 写在 server 块里，而 http 块没启用 gzip/brotli —— 指令作用域失效，Nginx 可能完全忽略
误以为构建时生成 .css.gz 或 .css.br 是必须步骤：不需要。动态压缩（gzip on / brotli_static off）更简单，也避免部署时文件版本错配
Vary: Accept-Encoding 必须存在，否则 CDN 或代理可能把 gzip 版本缓存后返回给不支持 gzip 的客户端