vue3+vite项目gzip压缩与性能分析核心是生成.gz文件并用visualizer定位瓶颈：配置vite-plugin-compression（algorithm:'gzip', threshold:10240, deleteoriginfile:false），nginx启用gzip_static on，再通过rollup-plugin-visualizer生成stats.html分析体积分布。
Vue 3 项目配置打包后 Gzip 压缩 + 生产环境性能分析，核心就两件事：让构建时生成 .gz 文件，并用可视化工具看清体积和耗时瓶颈。操作不复杂，但漏掉关键配置容易白忙。
一、vite.config.ts 中启用 Gzip 预压缩
使用 vite-plugin-compression 在 build 阶段直接产出 .gz 文件，这是最稳妥的方案。
- 安装插件：npm install vite-plugin-compression -D
- 在 vite.config.ts 的 plugins 数组中加入：
import viteCompression from 'vite-plugin-compression'
plugins: [vue(), viteCompression({
algorithm: 'gzip',
ext: '.gz',
verbose: true,
threshold: 10240, // 只压缩 ≥10KB 的文件
filter: /\.(js|css|html|json|svg)$/i,
deleteOriginFile: false // 保留原始文件，兼容性兜底
})]
注意：deleteOriginFile: false 是推荐值——服务器若未开启 gzip_static 或不支持 .gz，仍可回退加载原始文件；设为 true 仅适用于明确支持且已配置好的 CDN 或 Nginx 环境。
二、Nginx 必须配合开启 gzip_static
光有 .gz 文件不够，服务器得知道“有压缩包就优先发它”。Nginx 需启用 gzip_static on，而非仅开 gzip on。
- 在 server 块中添加或确认以下配置：
gzip on;
gzip_static on; # 关键！让 Nginx 直接返回已存在的 .gz 文件
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain application/javascript text/css application/json image/svg+xml;
gzip_vary on;
⚠️ 不要遗漏 gzip_static on。只开 gzip on 是实时压缩，性能开销大，且无法利用构建时预压缩的优势。
三、用 rollup-plugin-visualizer 定位体积与结构问题
Gzip 能压体积，但压不了“不该打进来的代码”。先看清楚谁占了空间，再动手删或拆。
- 安装：npm install rollup-plugin-visualizer -D
- 在 vite.config.ts 中引入并启用：
import { visualizer } from 'rollup-plugin-visualizer'
plugins: [..., visualizer({ open: true })]
执行 npm run build 后，会自动生成 stats.html 并自动打开。页面中可直观看到：
- 各 chunk 大小排序（重点关注 vendor、app、大业务模块）
- node_modules 中哪些依赖贡献了最多体积（如 ECharts 全量、Moment.js）
- 重复引入的模块（比如多个地方 import 了同一份工具函数但没抽成独立 chunk）
四、附带建议：轻量级性能验证闭环
优化不是配完就结束，得验证效果：
- 对比构建耗时：执行 npm run build -- --debug 查看各阶段耗时
- 检查产物大小：build 后看 dist 目录下 .gz 文件是否生成，大小是否合理（JS/CSS 通常压缩 60%~75%）
- 浏览器验证：打开 DevTools → Network，刷新页面，查看资源 Size 列是否显示 “from disk cache” 或 “from memory cache”，且 Transfer Size 明显小于 Resource Size
- 本地模拟 Nginx：可用 npx serve -s dist -c ./serve.json（配合简单 gzip 配置）快速验证 .gz 是否生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
