怎么在 Nginx 中配置 Gzip 压缩优化前端 js 和 css 文件加载速度

在 Nginx 中优化 JS 和 CSS 加载速度，最推荐启用动态 Gzip 压缩并在配置中显式声明 MIME 类型。必须在 http 或 server 块设置 gzip on 且 gzip_types 包含 application/javascript 和 text/css，否则默认仅压缩 HTML 导致前端资源无效。

先说结论：配置生效的关键在于显式指定 JS 和 CSS 的 MIME 类型，而非仅开启开关。

适合：前后端分离架构、静态资源托管、带宽受限场景
先做：检查 gzip_types 是否包含 application/javascript 和 text/css
再验证：使用 curl 命令检查响应头 Content-Encoding 是否为 gzip

命令速用版

将以下配置段放入 nginx.conf 的 http 块或站点的 server 块中，保存后重载配置。

gzip on;
gzip_min_length 1024;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/json;
gzip_vary on;

为什么会这样

Nginx 默认只压缩 text/html 类型，漏配 MIME 类型是 JS/CSS 未压缩的主因。浏览器请求时携带 Accept-Encoding: gzip，但 Nginx 若未在 gzip_types 中匹配到对应类型，会直接返回未压缩内容。

分步处理

1. 打开配置文件，通常位于/etc/nginx/nginx.conf 或/etc/nginx/conf.d/下的站点文件。

2. 在 http 或 server 块内添加 gzip 配置，确保 gzip_types 显式包含 application/javascript 和 text/css。

怎么在 Nginx 中配置 Gzip 压缩优化前端 js 和 css 文件加载速度

3. 执行 sudo nginx -t 检查语法，确认无误后执行 sudo nginx -s reload 重载服务。

4. 若使用构建工具生成了.gz 文件，需额外开启 gzip_static on 以优先返回预压缩文件。

怎么验证是否生效

使用 curl 命令模拟请求并查看响应头，确认 Content-Encoding 字段存在。

curl -H "Accept-Encoding: gzip" -I http://localhost/app.js

若返回头中包含 Content-Encoding: gzip，说明压缩已生效；若缺失该字段，检查 MIME 类型配置或文件大小是否低于 gzip_min_length 阈值。

常见坑

1. gzip_types 漏写：默认不压缩 JS/CSS，必须手动添加 application/javascript 和 text/css。

2. 压缩已压缩文件：不要对 JPEG、PNG、ZIP 等格式开启 Gzip，几乎无收益且浪费 CPU。

3. 压缩级别过高：gzip_comp_level 设 9 会显著增加 CPU 消耗，建议设在 4-6 之间平衡性能。

4. 小文件压缩：小于 gzip_min_length 的文件不压缩，避免小文件越压越大。

常见问题

JS 和 CSS 文件为什么没被压缩？

最常见原因是 gzip_types 未包含对应的 MIME 类型，请检查配置中是否有 application/javascript 和 text/css。

gzip_comp_level 设置多少合适？

建议设置为 5，级别 4-6 是压缩率与 CPU 消耗的平衡区间，过高会导致高并发下响应变慢。

开启 gzip_static 有什么用？

用于优先返回构建工具生成的预压缩.gz 文件，节省运行时 CPU 计算，但需确保原文件未被删除。

参考来源

Linux 怎么配置 Nginx 压缩 JS 和 CSS Nginx 前端加速方案详解
【NGINX 实战】NGINX 启用 Gzip 压缩 (优化前端资源加载速度)
Nginx 静态资源加速指南：开启 Gzip 压缩提升网页加载速度
Nginx gzip 压缩完全指南：从基础配置到高级优化