nginx压缩js/css必须启用gzip on并显式配置gzip_types,否则因默认仅压缩text/html,漏写application/javascript或text/css将导致完全不压缩;验证需用curl -h "accept-encoding: gzip" -i检查content-encoding: gzip。

直接开干:Nginx 压缩 js 和 css 文件,**必须用动态压缩(gzip on)+ 正确配置 gzip_types**,静态压缩(gzip_static on)只是锦上添花,不是必需项;漏配 application/javascript 或 text/css 会导致压缩完全不生效。
为什么 js 和 css 压缩后没效果?
最常见原因是 gzip_types 没包含对应 MIME 类型。Nginx 默认只压 text/html,其他类型全靠手动加。浏览器发请求时带 Accept-Encoding: gzip,但 Nginx 查 gzip_types 发现不匹配,就原样返回未压缩内容。
-
text/css是标准 CSS 的 MIME 类型,必须显式写入,不能省略或写成css -
application/javascript是现代推荐写法,比过时的text/javascript更可靠;部分老配置漏掉它,.js就不会被压 - 如果用了
vite-plugin-compression等工具生成.js.gz文件,却没开gzip_static on,Nginx 也不会自动找并返回 .gz 版本 - 检查响应头:用
curl -H "Accept-Encoding: gzip" -I http://localhost/app.js,看是否有Content-Encoding: gzip
gzip_comp_level 设多少才合适?
设太高(比如 9)对 js/css 几乎没额外收益,反而明显拖慢高并发响应。这类文本资源在 level 4–6 就已逼近压缩极限,再往上 CPU 耗费陡增,传输体积几乎不变。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- level 1–3:适合 CPU 资源紧张、QPS 极高的网关层,压缩率低但快
- level 4–6:绝大多数前端服务的黄金区间,平衡压缩率与延迟,推荐从
gzip_comp_level 5起手 - level 7–9:仅建议用于极少数超大 JSON 报文或内部 API,
js/css完全没必要 - 注意:
gzip_buffers默认是32 4k或16 8k,若压缩大量小文件(如微前端 chunk),可微调为gzip_buffers 64 4k避免缓冲区不足告警
要不要开 gzip_static on?
开,但前提是构建流程已生成 .js.gz 和 .css.gz 文件,并且和原始文件放在同一目录。它不替代动态压缩,而是「优先返回预压缩文件」,省去运行时计算——对 CPU 更友好,尤其适合静态资源 CDN 回源场景。
- 必须确保构建工具(如 Vite、Webpack)输出了
.gz后缀文件,且deleteOriginFile: false(否则原文件被删,gzip_static找不到 fallback) -
gzip_static on只认同名.gz文件,不处理.br(Brotli),要支持 Brotli 得用ngx_brotli模块 - 若同时开了
gzip on和gzip_static on,Nginx 会先查.gz文件,不存在才走动态压缩——两者不冲突,可共存 - 别忘了加
gzip_vary on,否则 CDN 或代理缓存可能把压缩版和未压缩版混存,导致某些客户端拿到乱码
真正容易被忽略的点是:Nginx 不会自动识别你本地开发时用的 localhost 或自签名证书环境下的压缩行为是否生效;一定要用真实 UA、真实 Accept-Encoding 请求头验证,而不是只看浏览器开发者工具里 Network 面板的“Size”列——那个值有时是解压后的大小,有误导性。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










