前端项目优化：Gzip 压缩

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

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

静态预压缩

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

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

安装 vite-plugin-compression 插件：

1	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 模块：
1
nginx -V 2>&1 | grep gzip_static
如果未启用，需要重新编译 Nginx，添加 --with-http_gzip_static_module 参数。
配置 Nginx 使用 .gz 文件：
1
2
3
4
5
6
7
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 响应头，确保客户端缓存兼容性。

动态压缩的优缺点

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

对比总结

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