1. 安裝插件

npm install vite-plugin-compression -D

2. 在?vite.config.ts?中配置

TypeScript

import { defineConfig } from 'vite'
import compression from 'vite-plugin-compression'export default defineConfig({plugins: [compression({algorithm: 'gzip',ext: '.gz',threshold: 1024, // 小于 1KB 的文件不壓縮})]
})

一、Nginx（Linux 最常見）

# 1. 確認已開啟 gzip 靜態模塊（絕大多數發行版默認已編譯）
nginx -V 2>&1 | grep -o with-http_gzip_static_module
# 如果輸出中有 with-http_gzip_static_module 就說明支持

# 2. nginx.conf 或站點配置
server {listen 80;server_name  your-domain.com;root /var/www/dist;   # 指向 vite build 出來的 dist 目錄# 優先使用現成的 .gzgzip_static  on;      # 關鍵！# 動態壓縮作為兜底（可關掉，因為我們已經有 .gz）gzip        off;# 其余靜態資源location / {try_files $uri $uri/ /index.html;}# 靜態文件緩存期location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ {expires 1y;add_header Cache-Control "public, immutable";}
}

# 3. 重載配置
sudo nginx -t && sudo systemctl reload nginx

瀏覽器訪問后，在 DevTools → Network → 某 xxx.js → Response Headers 里能看到

Content-Encoding: gzip

說明 .gz 文件被直接命中。

?