Compress components with gzip

什么是 Gzip 压缩？

你可以把它想象成把你网站的文本文件（如 HTML, CSS, JavaScript）在发送给用户之前，先用一个压缩工具（就像 WinRAR 或 7-Zip）把它们打包成一个更小的 .zip
文件。

用户的浏览器接收到这个压缩文件后，会自动解压并使用。因为文件变小了，下载时间自然就缩短了。这个过程
对用户是完全透明的。

注意： Gzip 主要用于压缩文本类文件。图片（JPG, PNG）和视频（MP4）等媒体文件通常已经有自己的压缩算法，不需要再用 Gzip 压缩。

Gzip 是如何工作的？

这是一个浏览器和服务器之间的“合作”：

1. 浏览器请求: 你的浏览器在向服务器请求一个文件时，会通过一个叫 Accept-Encoding 的请求头告诉服务器：“你好，我能看懂 gzip 格式的压缩文件。”
2. 服务器响应:
   • 如果服务器开启了 Gzip 功能，它会找到你请求的文件（比如 style.css），在服务器上实时地将它压缩。
   • 然后，服务器把这个压缩后的文件发送给浏览器，并附带一个叫 Content-Encoding: gzip 的响应头，告诉浏览器：“我发给你的是一个 gzip 压缩包。”
3. 浏览器解压: 浏览器看到这个响应头后，就知道需要先解压文件，然后再像往常一样渲染页面。

如何为你的网站开启 Gzip？

开启 Gzip 是在服务器上配置的，而不是在你的项目代码里。这取决于你的网站是如何部署和托管的。以下是几种常见场景的配置方法：

场景一：使用现代化托管平台 (如 Netlify, Vercel, GitHub Pages)

好消息是，这些平台通常默认已经为你自动开启了 Gzip 压缩，你什么都不用做。它们会自动压缩所有合适的资源。

场景二：使用 Nginx 服务器

如果你的网站部署在自己的 Nginx 服务器上，你需要修改 nginx.conf 配置文件，在 http 或 server 块中加入以下配置：

# 开启 gzip 压缩
gzip on;

# 为不同浏览器和版本添加 Vary 头，以正确处理缓存
gzip_vary on;

# 压缩的最小文件大小，小于这个大小的文件不会被压缩
gzip_min_length 1k;

# 需要进行压缩的文件类型
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

# 开启对代理服务器的压缩
gzip_proxied any;

# 设置压缩级别，1-9，级别越高压缩率越高，但越耗费 CPU。通常 4-6 是一个好的折中。
gzip_comp_level 6;

修改配置后，记得重启 Nginx 服务。

场景三：使用 Apache 服务器

如果你的网站部署在 Apache 服务器上，你可以通过修改 .htaccess 文件来开启 Gzip（需要确保 mod_deflate 模块已启用）：

<IfModule mod_deflate.c>
  # 需要进行压缩的文件 MIME 类型
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json

  # 为旧版浏览器设置兼容性
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  # 确保代理服务器不会发送错误的内容
  Header append Vary User-Agent
</IfModule>

如何验证 Gzip 是否已成功开启？

验证方法很简单，你可以使用浏览器的开发者工具：

1. 打开你的网站。
2. 按 F12 或 右键 -> 检查 打开开发者工具。
3. 切换到 网络 (Network) 标签页。
4. 刷新页面 (可能需要按 Ctrl+Shift+R 或 Cmd+Shift+R 来强制刷新，避免缓存影响)。
5. 在文件列表中，找到一个 CSS 或 JS 文件（例如 style.css）。
6. 点击该文件，在右侧的窗口中查看 标头 (Headers)。
7. 在 响应标头 (Response Headers) 部分，寻找 Content-Encoding: gzip。

如果你能看到 Content-Encoding: gzip，那就说明 Gzip 已经成功开启了！你还可以留意 Size 列，它会显示两个值：一个是原始大小，一个是压缩后传输的大小，你可以直观地看到压缩效果。