Nginx以及CDN配置中Gzip / Brotli 压缩使用说明
标签: Nginx
- This topic has 1 个回复, 1 个参与人, and was last updated 5 小时, 39 分 前 by
追光.
- 作者帖子
- 2025年7月11日 - 下午2:19 #459
追光管理员当然可以,以下是一篇完整、专业且实用的关于 Gzip 与 Brotli(br)压缩的使用说明文档,涵盖了其工作原理、适用范围、各类 CDN 配置格式,以及 Nginx 示例。
📦 Gzip / Brotli 压缩使用说明
一、原理简介
🔧 Gzip 和 Brotli 是什么?
Gzip:一种广泛使用的压缩算法,几乎所有浏览器都支持。
Brotli (br):Google 开发的更高效压缩算法,体积更小,适用于现代浏览器。
这两者都属于 HTTP 内容压缩方式。服务器根据客户端的 Accept-Encoding 请求头返回相应的压缩版本,从而减小资源体积,提高加载速度。
二、压缩的主要对象
Gzip 和 Brotli 都适用于文本类文件,压缩率高,收益显著。
✅ 建议开启压缩的文件类型:
类型
示例 MIME
常见扩展名
文本
text/html, text/plain, text/css
.html, .css, .txt
脚本
application/javascript, text/javascript, application/json
.js, .json
数据
application/xml, application/rss+xml
.xml, .rss, .atom
字体
font/woff, font/woff2, application/font-woff
.woff, .woff2
矢量图
image/svg+xml
.svg
字幕
text/vtt
.vtt
三、⚠️ 不推荐压缩的类型
因为这些文件本身就已压缩或压缩后收益极小,甚至会增加负担:
类型
常见扩展名
图像
.jpg, .png, .webp, .gif, .avif
视频
.mp4, .webm, .mov
音频
.mp3, .ogg, .aac, .flac
压缩包
.zip, .gz, .7z, .rar
四、Nginx 配置示例
以下为一份推荐的 Nginx 配置,开启了 Gzip,并适配主流类型:
# 开启 Gzip gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 512; gzip_types text/plain text/css text/javascript application/javascript application/x-javascript application/json application/xml application/rss+xml application/atom+xml image/svg+xml font/woff font/woff2;
# Brotli(需安装 Brotli 模块)
brotli on;
brotli_comp_level 6;
brotli_types
text/plain
text/css
text/javascript
application/javascript
application/json
application/xml
image/svg+xml
font/woff
font/woff2;五、各类 CDN 中的启用方式
🟩 文件类型匹配(MIME类型)
配置示例(分号分隔):
text/html;text/css;text/javascript;application/javascript;application/json;application/xml;image/svg+xml;application/rss+xml;application/font-woff;application/font-woff2;font/woff;font/woff2
🟨 文件扩展名匹配
配置示例(分号分隔):
html;htm;css;js;mjs;json;xml;txt;csv;svg;rss;atom;xhtml;vtt;ttf;otf;woff;woff2
📌 一些 CDN(如 Cloudflare、七牛、腾讯云)支持手动填写文件后缀/类型用于开启 Gzip/Brotli。
六、浏览器支持说明
压缩类型
浏览器支持情况
Gzip
几乎所有浏览器
Brotli
Chrome、Edge、Firefox、Safari 等现代浏览器
七、压缩判断方法
可以通过浏览器开发者工具或 curl 检查压缩:
curl -I -H "Accept-Encoding: gzip, br" https://example.com/style.css
观察返回头中是否包含:
Content-Encoding: gzip
Content-Encoding: br
八、建议与实践
若使用 CDN,优先启用 Brotli > Gzip。
若使用 Nginx 等服务器,推荐同时开启 Gzip 与 Brotli(针对不同浏览器)。
图片等媒体文件请通过 [webp/avif 格式优化] 替代压缩。
- 2025年7月11日 - 下午2:23 #462
追光管理员确实如此,这里加一节说明 CDN 与 Nginx 的关系,并补充在压缩机制中的角色,以帮助理解背后的原理。
九、📡 CDN 与 Nginx 的关系:为何 CDN 也能压缩?
💡 本质:大多数 CDN 的核心就是 Nginx 或其衍生
几乎所有主流 CDN(内容分发网络)厂商 —— 包括 Cloudflare、阿里云 CDN、腾讯云 CDN、又拍云、七牛、Fastly 等 —— 它们在边缘节点部署的都是基于 Nginx(或其变种如 Tengine、OpenResty、Envoy)的高性能服务器。
这些 CDN 节点的作用:
缓存静态资源(图片、JS、CSS等);
自动根据浏览器支持返回 Brotli 或 Gzip 压缩内容;
对响应进行头部优化(如 Cache-Control、Content-Encoding);
提供 HTTPS、HTTP/2、甚至 HTTP/3 支持;
防护(如 DDoS、WAF);
✅ CDN 压缩的工作机制:
浏览器请求时带上 Accept-Encoding: br, gzip, deflate;
CDN 节点检测是否已有压缩版本缓存;
如果有,直接返回压缩版本;
如果没有,CDN 使用其底层的 Nginx 压缩功能生成并缓存压缩副本;
后续请求就不必再次压缩。
🔄 本质行为与 Nginx 配置高度一致:
因此,CDN 面板中配置的:
Gzip 开关;
Brotli 开关;
哪些 MIME 类型需要压缩;
哪些文件扩展名启用压缩;
其实本质就是在 CDN 边缘节点的 Nginx 中做了相关设置,只不过封装成了“开关”和“白名单”形式。
📌 总结:为什么理解 Nginx 就能掌控 CDN 行为?
因为:
CDN = Nginx(+ 分布式缓存 + 安全模块)
你对 Nginx 压缩、缓存、响应头的理解越深,在 CDN 中的配置就越游刃有余;
如果你自建服务器或使用宝塔等面板,Nginx 配置经验还能直接迁移;
- 作者帖子
- 在下方一键注册,登录后就可以回复啦。