30k 前端必会知识 nginx gzip 压缩配置

要配置前端项目使用 gzip 压缩，我们通常需要在构建工具（如 Vite）和 Web 服务器（如 Nginx）中分别进行配置。这样做可以提高网站加载速度，减少传输的数据量。

Vite 配置 (vite.config.js)

对于 Vite 来说，它自身并不提供直接的gzip压缩功能。但你可以通过插件或者在构建过程中生成gzip文件。以下是使用vite-plugin-compression插件来生成gzip压缩文件的示例配置：

import { defineConfig } from "vite";
import compression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    // 使用 gzip 压缩
    compression({
      verbose: true, // 打印详细信息
      disable: false, // 不禁用压缩
      threshold: 10240, // 只压缩大小超过此阈值的资源（单位为字节）
      algorithm: "gzip", // 使用gzip压缩
      ext: ".gz", // 压缩文件后缀
    }),
  ],
});

这段配置会在构建过程中为每个资源文件生成一个.gz后缀的压缩文件。然后你可以配置你的 Web 服务器（如 Nginx），使其优先提供这些gzip压缩的文件。

Nginx 配置 (nginx.conf)

对于 Nginx，你需要在配置文件中添加对gzip的支持，以便它可以自动为支持gzip的请求提供压缩内容。此外，如果你已经通过 Vite 生成了gzip文件，你还可以配置 Nginx 以优先提供这些静态gzip文件。

以下是一个基本的nginx配置示例，演示如何启用gzip压缩，并配置 Nginx 以提供预先压缩的.gz文件：

http {
    gzip on; # 开启gzip压缩
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6; # 压缩级别
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    server {
        listen 80;
        server_name your_domain.com;

        location / {
            root   /path/to/your/dist; # 指向你的构建输出目录
            index  index.html index.htm;
            try_files $uri $uri/ @rewrites;
        }

        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }

        # 配置Nginx以提供预先压缩的.gz文件（如果存在）
        location ~* \.(js|css|json|txt|html|ico|svg)(\.gz)?$ {
            gzip_static on; # 优先提供.gz文件
            expires max;
            add_header Cache-Control public;
        }
    }
}

在这个配置中，gzip_static on; 指令告诉 Nginx 在提供文件时优先查找对应的.gz版本。如果找到，Nginx 会提供.gz文件而不是原始文件，并且还会自动设置正确的Content-Encoding响应头。

这样配置后，当浏览器支持gzip压缩且请求特定资源时，如果对应的.gz文件存在，Nginx 就会直接提供该压缩文件，从而减少数据传输量，加快页面加载速度。

怎么从浏览器 f12 调试面板中查看是否使用了 gzip 压缩返回

要在浏览器的开发者工具（F12）中检查是否使用了 Gzip 压缩，你可以按照以下步骤操作：

Chrome 或 Edge 浏览器

1. 打开你想要检查的网站。
2. 按下 F12 键或者右键点击页面并选择“检查”（Inspect），打开开发者工具。
3. 转到“网络”（Network）标签。你可能需要刷新页面以开始捕获网络请求。
4. 在网络请求列表中，点击一个特定的资源，比如一个 CSS 文件、JavaScript 文件或页面本身。
5. 查找并点击“响应头”（Response Headers）或“请求头”（Request Headers）部分。
6. 在“响应头”中，查找 Content-Encoding。如果它的值是 gzip，那么这个资源就是通过 Gzip 压缩发送的。
7. 同样地，你也可以检查 Content-Type 来确认资源的类型（如 text/css 或 application/javascript）。

没有 gzip 压缩

配置了 gzip 压缩

Firefox 浏览器

1. 打开你想要检查的网站。
2. 按 F12 键或者右键点击页面并选择“检查元素”（Inspect Element），打开开发者工具。
3. 点击并打开“网络”（Network）面板。可能需要刷新页面以捕获网络请求。
4. 在网络活动列表中，选择一个资源。
5. 查找并选择“头”（Headers）选项卡，然后在“响应头”（Response Headers）区域寻找 Content-Encoding。如果该值为 gzip，则表明此资源是经过 Gzip 压缩的。

附加提示

• 查看所有压缩资源：在某些浏览器中，你可以在网络（Network）面板的筛选框中输入 content-encoding，这样就可以快速查看所有标记为使用特定压缩（如 Gzip）的资源。
• 注意缓存：如果你之前访问过页面，浏览器可能从缓存中加载资源而不是从服务器重新请求。在这种情况下，可能需要清除浏览器缓存或开启无痕/隐私模式来确保从服务器加载最新资源。

通过上述步骤，你可以轻松地检查网站的资源是否利用 Gzip 压缩来优化性能。