前端项目优化：Gzip 压缩（2）

前端项目优化：Gzip 压缩

页面加载速度是影响用户体验和 SEO 排名的关键因素。Gzip 压缩是一种简单高效的优化方法，可以通过压缩静态资源文件减少传输数据量，提高加载性能。

本节将讲解两种实现方式：静态预压缩和动态压缩。

静态预压缩

静态预压缩是指在构建阶段对文件进行压缩，生成 .gz 文件供服务器直接传输。这种方式通过减少服务器压缩的计算开销，提升响应速度。

1. 使用 Vite 插件生成压缩文件

• 安装 vite-plugin-compression 插件：

  npm install vite-plugin-compression --save-dev

• 配置插件生成 .gz 文件：

  import viteCompression from 'vite-plugin-compression';
  
  export default defineConfig({
    plugins: [
      viteCompression({
        ext: '.gz',
        algorithm: 'gzip',
        threshold: 1024,
        deleteOriginFile: true,
        filter: (file) => {
          // exclude index.html
          return !(file.endsWith("index.html"))
        }
      })
    ]
  });

  • ext: 指定压缩后的文件扩展名。
  • algorithm: 压缩算法，这里使用 gzip。
  • threshold: 仅压缩大于该大小（以字节为单位）的文件。
  • deleteOriginFile: 是否删除原始文件。
  • filter: 过滤不需要压缩的文件，例如 index.html。

2. 配置 Nginx 启用 gzip_static

• 检查 Nginx 是否支持 gzip_static 模块：

  nginx -V 2>&1 | grep gzip_static

  如果未启用，需要重新编译 Nginx，添加 --with-http_gzip_static_module 参数。

• 配置 Nginx 使用 .gz 文件：

  server {
    location / {
      gzip_static on;
      expires max;
      add_header Cache-Control "public";
    }
  }

  • gzip_static on: 指定使用预压缩的 .gz 文件。
  • expires max 和 Cache-Control: 设置缓存策略，提升性能。

注意事项

• 确保构建生成的 .gz 文件与原始文件放在同一目录。
• 使用工具验证 Nginx 是否正确传输 .gz 文件，例如 Chrome 开发者工具或 curl。

动态压缩

动态压缩指的是由服务器在请求时实时对文件进行压缩，这种方式适合未预压缩的文件。

配置 Nginx 动态启用 Gzip

在 Nginx 配置文件中启用 Gzip：

http {
    gzip on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/javascript application/json;
    gzip_vary on;
}

• gzip on: 启用动态压缩。
• gzip_min_length: 设置启用压缩的最小文件大小。
• gzip_types: 指定需要压缩的 MIME 类型。
• gzip_vary: 启用 Vary: Accept-Encoding 响应头，确保客户端缓存兼容性。

动态压缩的优缺点

• 优点：无需额外构建流程，对所有符合条件的文件自动启用压缩。
• 缺点：服务器需要额外的计算资源，可能增加响应时间。

对比总结

特性	静态预压缩	动态压缩
性能	更高，减少服务器开销	较低，依赖实时压缩
实现复杂度	需要构建和部署支持	简单，仅需服务器配置
灵活性	仅适用于已构建文件	支持所有静态文件

其他压缩方式

除了 Gzip 压缩，还可以考虑其他压缩方式，如 Brotli，它提供了更高的压缩比和更快的压缩速度。