Nginx以及CDN配置中Gzip / Brotli 压缩使用说明

VFX大学 云计算 Nginx以及CDN配置中Gzip / Brotli 压缩使用说明

标签: 

正在查看 1 条回复
  • 作者
    帖子
    • #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 格式优化] 替代压缩。

    • #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 压缩的工作机制:

      1. 浏览器请求时带上 Accept-Encoding: br, gzip, deflate

      2. CDN 节点检测是否已有压缩版本缓存;

      3. 如果有,直接返回压缩版本

      4. 如果没有,CDN 使用其底层的 Nginx 压缩功能生成并缓存压缩副本;

      5. 后续请求就不必再次压缩。

      🔄 本质行为与 Nginx 配置高度一致:

      因此,CDN 面板中配置的:

      • Gzip 开关;

      • Brotli 开关;

      • 哪些 MIME 类型需要压缩;

      • 哪些文件扩展名启用压缩;

      其实本质就是在 CDN 边缘节点的 Nginx 中做了相关设置,只不过封装成了“开关”和“白名单”形式。


      📌 总结:为什么理解 Nginx 就能掌控 CDN 行为?

      因为:

      • CDN = Nginx(+ 分布式缓存 + 安全模块)

      • 你对 Nginx 压缩、缓存、响应头的理解越深,在 CDN 中的配置就越游刃有余;

      • 如果你自建服务器或使用宝塔等面板,Nginx 配置经验还能直接迁移;

正在查看 1 条回复
  • 在下方一键注册,登录后就可以回复啦。