Vite 项目需通过 vite-plugin-compression 插件配置 algorithm（'gzip' 或 'brotliCompress'）、ext（'.gz' 或 '.br'）、threshold（建议 ≥10KB）并配合 Nginx 等服务器启用对应模块及 static 指令，才能实现有效静态资源预压缩。
直接在 Vite 的插件配置里引入 vite-plugin-compression，指定压缩算法（gzip 或 brotliCompress），就能实现静态资源的前端预压缩。关键不是“加了插件就行”，而是算法选择、阈值设定和服务器配合三者缺一不可。
安装与基础接入
先安装插件（以 pnpm 为例）：
pnpm add -D vite-plugin-compression
然后在 vite.config.ts 中导入并加入 plugins 数组：
立即学习“前端免费学习笔记（深入）”；
import viteCompression from 'vite-plugin-compression'
不需要额外写构建脚本或手动调用 API，Vite 在 build 阶段会自动对符合条件的文件生成压缩副本。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
区分 Gzip 和 Brotli 的配置写法
两者核心差异在 algorithm 和 ext 字段，其他参数可复用：
- Gzip：用
algorithm: 'gzip'，输出文件后缀为.gz - Brotli：用
algorithm: 'brotliCompress'，输出文件后缀为.br
示例（Brotli）：
viteCompression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 10240,
deleteOriginFile: false
})
注意：threshold 单位是字节，10240 表示 ≥10KB 的文件才压缩——太小的文件压缩后反而可能变大，不建议无脑设为 1024。
必须配套的服务器支持
插件只负责“生成 .gz 或 .br 文件”，真正生效靠服务器识别请求头并返回对应压缩版本：
- Nginx 需启用对应模块：Gzip 模块默认开启；Brotli 需编译时加
--with-http_brotli_module，配置中加brotli on; - 静态服务要能根据
Accept-Encoding头匹配.gz或.br文件，例如 Nginx 的gzip_static on或brotli_static on - 确保 dist 目录下同时存在
index.js和index.js.gz（或.br），否则服务器找不到压缩文件
几个容易忽略的细节
压缩不是开箱即用的“魔法”，实际落地要注意：
-
不要删原始文件：设
deleteOriginFile: false，否则没压缩支持的旧浏览器会 404 - 检查浏览器兼容性：Brotli 在 Chrome 49+、Firefox 44+、Safari 16+ 支持良好，但 IE 完全不支持，需保留 Gzip 作为降级方案
-
验证是否生效：打包后看 dist 目录是否有 .gz/.br 文件；打开 DevTools → Network，刷新页面，查看资源的
Content-Encoding响应头是否为gzip或br
