必须在http块中配置gzip on并显式添加text/css到gzip_types，否则css文件不会被压缩；预编译.css.gz需配合gzip_static on且文件共存；验证须用curl检查content-encoding头及实际体积变化。
直接在 http 块中配对启用动态压缩 + 显式声明 MIME 类型，是让 CSS 文件真正被 Gzip 压缩的核心。预编译文件（如构建工具生成的 .css.gz）则需额外开启 gzip_static 并确保文件共存——两者不冲突，可同时生效。
必须写进 gzip_types 的 text/css
Nginx 默认只压缩 text/html，CSS 文件的 MIME 类型是 text/css，大小写敏感，不能省略或简写为 css。漏掉它，哪怕开了 gzip on，浏览器带 Accept-Encoding: gzip 请求，Nginx 也原样返回未压缩内容。
- 正确写法（放在
http { }内，不在server或location中）：gzip_types text/plain text/css application/javascript application/json text/xml; - 避免加入已压缩格式，如
image/jpeg、font/woff2，徒增 CPU 负担且无体积收益 - 若用 Brotli，同样要加
text/css到brotli_types，且仅 HTTPS 下生效
合理设置压缩阈值与级别
CSS 文件通常体积适中，但构建产物里可能含大量微型样式（如 Tailwind 的 inline 提取），小文件越压越大，必须设下限。
-
gzip_min_length 1024：只压缩 ≥1KB 的响应体，防微小 CSS 反而膨胀 -
gzip_comp_level 4–6：Level 6 是平衡点，再往上 CPU 消耗明显上升，压缩率提升几乎为零 -
gzip_buffers 16 8k或64 4k：小文件多时建议后者，避免缓冲区不足告警
预编译 .css.gz 文件要配 gzip_static
前端构建（如 Vite、Webpack）若已生成 style.css.gz，只需 Nginx 找到并返回它，无需运行时压缩，更省 CPU。
- 在对应
location块中启用：location ~* \.css$ { gzip_static on; } - 确保
.css.gz和原始.css在同一目录，且权限可读 - 不需重复写
gzip on或调整gzip_comp_level，gzip_static与动态压缩互为兜底 - 验证方式：用
curl -I -H "Accept-Encoding: gzip" /style.css，再比对Content-Length是否等于本地style.css.gz字节数
验证是否真生效，别只看配置有没有
改完配置 ≠ 压缩成功。必须检查真实响应头和实际体积变化。
- 测试动态压缩：
curl -I -H "Accept-Encoding: gzip" https://yoursite.com/style.css→ 应含Content-Encoding: gzip - 测试预压缩路径：
查响应头中的Last-Modified是否匹配.css.gz文件修改时间 - 若没
Content-Encoding头，90% 是gzip_types漏了text/css，或配置位置错了（写在server外层或location里） - 若有头但体积几乎不变，说明文件太小被跳过，检查
gzip_min_length和实际文件大小
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
