在 Vite 中构建时，支持 Gzip 压缩是通过配置插件来实现的。Vite 本身并不会自动生成 Gzip 文件，但可以使用插件如 vite-plugin-compression 来实现 Gzip 压缩支持。以下是具体步骤：
1. 安装 vite-plugin-compression
首先，在你的项目中安装 vite-plugin-compression，这是一个用于生成 Gzip 压缩文件的插件。
npm install vite-plugin-compression --save-dev
或者使用 Yarn：
yarn add vite-plugin-compression --dev
2. 配置 Vite
接下来，在 Vite 的配置文件 vite.config.js 中引入并使用这个插件。这个插件会在 Vite 构建的过程中生成 .gz 压缩文件。
import { defineConfig } from 'vite';
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
viteCompression({
verbose: true, // 是否在控制台输出压缩结果
disable: false, // 是否禁用插件
threshold: 10240, // 只有大于这个大小的文件才会压缩，单位是字节，默认值为 10240 (10kb)
algorithm: 'gzip', // 使用 gzip 压缩
ext: '.gz', // 生成的压缩包后缀
})
]
});
配置项说明：
- verbose: 是否在构建时在控制台输出哪些文件被压缩。
-
disable: 是否禁用该插件，默认值为
false。 - threshold: 只有文件大小大于指定值时，才会生成压缩文件，单位是字节（默认 10KB）。
-
algorithm: 压缩算法，默认为
gzip，你也可以使用brotliCompress来生成 Brotli 压缩文件。 -
ext: 压缩文件的后缀名，默认是
.gz。
3. 启用 Brotli 压缩（可选）
如果你想要同时支持 Brotli 压缩（通常效果比 Gzip 更好），可以通过将 algorithm 设置为 brotliCompress，或者同时生成 Gzip 和 Brotli 文件。
export default defineConfig({
plugins: [
viteCompression({
algorithm: 'brotliCompress', // 使用 Brotli 压缩
ext: '.br', // Brotli 压缩文件的后缀
}),
viteCompression({
algorithm: 'gzip', // 同时生成 Gzip 压缩
ext: '.gz', // Gzip 压缩文件的后缀
})
]
});
4. 配置服务器处理 Gzip 文件
虽然 Vite 可以生成 Gzip 或 Brotli 文件，但为了让浏览器请求这些文件时生效，你需要配置 Web 服务器来处理它们。例如，如果你使用 Nginx，可以按以下方式配置：
Nginx 配置：
server {
gzip on;
gzip_types text/plain application/json application/javascript text/css image/svg+xml;
gzip_static on; # 自动提供 .gz 文件
location / {
try_files $uri $uri.gz $uri.html =404;
}
}
这会告诉 Nginx 优先提供 .gz 文件，并自动检测是否存在这些压缩文件。
总结
通过 vite-plugin-compression 插件，Vite 构建过程可以支持 Gzip 和 Brotli 文件的生成。服务器配置（如 Nginx、Apache 或其他）也必须正确处理这些压缩文件，以确保客户端能够接收到压缩后的响应。
