Vue3+Vite项目需手动配置Gzip压缩：先安装vite-plugin-compression插件，再在vite.config.ts中配置threshold（建议10240）、filter（限定js/css等文本类型）、deleteOriginFile为false，并配合Nginx开启gzip_static on及对应mime类型，构建后验证dist中.gz文件存在且响应头含Content-Encoding: gzip。
Vue 3 项目用 Vite 初始化后，Gzip 压缩不是默认开启的，需要手动引入插件并配置生成 .gz 文件，再配合服务器（如 Nginx）启用对应支持才能生效。关键在“前端打包预生成 + 服务端识别响应”两个环节都到位。
安装 vite-plugin-compression 插件
该插件负责在 npm run build 时，为符合条件的资源自动生成 Gzip 压缩副本。
- 使用 npm：
npm install vite-plugin-compression -D - 使用 yarn：
yarn add vite-plugin-compression -D - 使用 pnpm：
pnpm add vite-plugin-compression -D
在 vite.config.ts/js 中注册并配置插件
确保插件在 plugins 数组中正确注册，并设置合理参数，避免压缩无效或破坏兼容性：
-
threshold：建议设为
10240（10KB），太小的文件压缩后可能反而变大 -
filter：显式限定类型，例如
/\.(js|css|html|json|svg)$/i，跳过图片等二进制资源 -
deleteOriginFile：保持
false，原始文件必须保留，否则不支持 Gzip 的浏览器将无法回退加载 -
verbose：设为
true可在构建日志中看到压缩详情，便于验证 -
algorithm 和 ext：默认
'gzip'和'.gz'即可，无需修改
示例配置片段：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
vue(),
viteCompression({
verbose: true,
threshold: 10240,
filter: /\.(js|css|html|json|svg)$/i,
deleteOriginFile: false
})
]
})
构建后检查 .gz 文件是否生成
运行 npm run build 后，进入 dist 目录，确认 JS、CSS 等文本资源旁是否出现同名 .gz 文件（如 index.abc123.js 和 index.abc123.js.gz）。没有则说明插件未生效，需检查路径、依赖是否安装成功、配置是否在正确环境（生产构建）下执行。
服务端必须同步启用 Gzip 支持
仅前端生成 .gz 文件不够——浏览器能否收到压缩内容，取决于服务器是否主动返回它。以 Nginx 为例，在 server 或 http 块中添加：
gzip on;-
gzip_static on;（关键！让 Nginx 优先返回已存在的.gz文件） -
gzip_types text/plain application/javascript text/css application/json application/xml image/svg+xml;（覆盖常用文本资源类型） -
gzip_min_length 1024;（与前端 threshold 呼应，避免小文件被重复压缩）
配置完重启 Nginx，用浏览器开发者工具的 Network 面板查看任意 JS/CSS 请求的 Response Headers，若含 Content-Encoding: gzip，即表示完整链路已通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
