Vite项目中开启Gzip或Brotli压缩需使用vite-plugin-compression插件进行静态预压缩，生成.gz/.br文件并配合Nginx等服务器配置gzip_static/brotli_static，实现高效传输；推荐双算法并行，threshold设为10240字节，deleteOriginFile必须为false。
在 Vite 项目中开启 Gzip 或 Brotli 生产压缩，核心是使用 vite-plugin-compression 插件，在构建时生成 .gz 或 .br 预压缩文件。这不是运行时压缩，而是静态预压缩，配合服务器（如 Nginx）直接返回对应文件，效率更高、更可控。
安装并基础配置 Gzip 压缩
执行安装命令：
pnpm add vite-plugin-compression -D
在 vite.config.ts 的 plugins 数组中加入：
- algorithm: 'gzip' 指定使用 Gzip 算法
- ext: '.gz' 生成的压缩文件后缀
- threshold: 10240 只压缩 ≥10KB 的文件（避免小文件负优化）
- deleteOriginFile: false 务必关闭——保留原始文件供不支持压缩的客户端回退
示例配置：
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
viteCompression({
algorithm: 'gzip',
ext: '.gz',
threshold: 10240,
deleteOriginFile: false,
verbose: true
})
]
})
同时启用 Brotli 压缩（推荐双算法并行）
Brotli 压缩率通常比 Gzip 高 15%–20%，尤其对 JS/CSS/HTML 效果明显。现代浏览器（Chrome/Firefox/Edge/Safari 11+）均支持，只需额外加一组插件配置：
- algorithm: 'brotliCompress' 启用 Brotli
- ext: '.br' 对应后缀名
- compressionOptions: { level: 5 } 推荐设为 5（平衡压缩率与构建耗时）
- 同样设置
threshold和deleteOriginFile: false
完整双压缩配置片段：
plugins: [
// Gzip
viteCompression({
algorithm: 'gzip',
ext: '.gz',
threshold: 10240,
deleteOriginFile: false
}),
// Brotli
viteCompression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 10240,
compressionOptions: { level: 5 },
deleteOriginFile: false
})
]
构建后验证是否生效
运行 npm run build 后，检查 dist/ 目录：
- 是否存在同名的
index.js.gz、style.css.br等文件 - 确认这些文件权限可读（Linux 服务器需注意
chmod和文件属主） - 打开控制台看构建日志，
verbose: true会列出每个被压缩的文件及压缩率
若只看到原始文件而无 .gz/.br，检查 threshold 是否设得过高，或文件本身未达阈值。
Nginx 必须同步配置才能真正生效
仅生成压缩文件不够，服务器必须能识别并优先返回它们：
- 启用
gzip_static on;：Nginx 收到请求时自动查找同名.gz文件并返回 - 启用
brotli_static always;（需已编译ngx_brotli模块）：优先响应.br，无则降级到.gz，再无才动压（不推荐依赖） - 保留
gzip on;和brotli on;：确保旧客户端仍可获得 gzip 响应，不破坏兼容性
关键点：客户端通过 Accept-Encoding: br,gzip 告知能力，Nginx 根据该头和静态文件存在情况智能选择，整个过程对前端透明。
