文章目录
- 一、 服务器端开启 Gzip 压缩
- 二、 客户端开启 Gzip 压缩（也需要配置 nginx）
- 三、总结
- 1️. `vite-plugin-compression` 的作用
- 2️. Nginx Gzip 压缩与插件的区别
- 3️. 实际项目选择建议
- 四、常见问题
- 1️. Nginx 配置作用域规则
- 2. `gzip_static on;` 的作用
- 3. `gzip_static on; + 静态压缩文件` 与 `gzip on;` 同时存在？
在前端项目中，JS/CSS文件较大时，启用Gzip压缩可以显著减少传输体积，提高页面加载速度。
下面我以Vue3项目 为例，讲解如何在 本地 Nginx 环境下开启 Gzip，并验证效果。
开启 gzip 压缩有两种方式：
- 服务器端开启 Gzip 压缩
- 客户端开启 Gzip 压缩
但都要在nginx中配置，才能生效。
一、 服务器端开启 Gzip 压缩
将 Vue3 打包目录拷贝到 Nginx 的部署目录，我这里是D:\Deploy\vue3
编辑Nginx配置nginx.conf，添加server配置：
server{listen8080;server_name localhost;# 压缩开启 [!code highlight:5]gzipon;# 开启 gzipgzip_vary on;# 根据 Accept-Encoding 缓存不同版本gzip_min_length1024;# 小于 1KB 的不压缩gzip_comp_level6;# 压缩等级gzip_types text/plain text/css application/javascript application/json text/html application/xml image/svg+xml;location /{try_files$uri$uri/ /index.html;}# vue3项目location /vue3/{aliasD:/Deploy/vue3/;try_files$uri$uri/ /index.html;index index.html index.htm;}}配置解释：
- gzip on：开启 Gzip 压缩
- gzip_types：指定压缩的文件类型
- try_files $uri $uri/ /index.html：Vue3 history 模式路由支持
启动 Nginx 后，访问http://localhost/vue3/，查看Network面板，查看JS/CSS文件响应头的字段content-encoding为gzip，说明开启了 Gzip 压缩。
如果没有content-encoding字段，说明未成功开启gzip。
如下所示(成功开启)：
未成功开启：
二、 客户端开启 Gzip 压缩（也需要配置 nginx）
客户端开启 Gzip 压缩，需要在使用第三方插件在打包构建时就需要生成对应的.gz文件。我的 vue3 项目使用的是vite-plugin-compression,在 vite.config.ts 中这样配置：
importcompressionPluginfrom"vite-plugin-compression";exportdefaultdefineConfig({plugins:[// gzip压缩ViteCompression({verbose:true,// 是否在控制台输出压缩结果disable:false,// 是否禁用threshold:1024,// 体积大于 threshold 才会被压缩,单位 balgorithm:"gzip",// 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']ext:".gz",// 生成的压缩包后缀deleteOriginFile:false//压缩后是否删除源文件})]});运行vite build打包项目，会在dist目录下生成对应的.gz文件。
如下所示：
然后在 nginx 中配置gzip on和gzip_static on;，开启直接返回.gz文件的功能。
server{listen80;server_name localhost;# 压缩开启 [!code highlight:2]gzipon;gzip_static on;# 直接返回 .gz 文件location /{try_files$uri$uri/ /index.html;}# vue3项目location /vue3/{aliasD:/Deploy/vue3/;try_files$uri$uri/ /index.html;index index.html index.htm;}}最后访问部署的项目http://localhost/vue3/，查看Network面板，查看JS/CSS文件响应头的字段content-encoding为gzip，说明开启了 Gzip 压缩。
如下所示：
三、总结
1️.vite-plugin-compression的作用
在构建阶段就把静态资源（JS/CSS/HTML）生成压缩文件（如
.gz或.br）。优点：
- 浏览器访问时直接获取压缩文件，不需要 Nginx 或其他服务器再压缩
- 减少服务器 CPU 消耗，适合高并发场景
缺点：
- 文件体积会多一份（原文件 + 压缩文件）
- 部署时服务器需要正确配置，让
.gz文件直接返回给浏览器
2️. Nginx Gzip 压缩与插件的区别
| 特性 | Nginx Gzip | vite-plugin-compression |
|---|---|---|
| 压缩时机 | 请求时（服务器动态压缩） | 构建时（生成静态压缩文件） |
| CPU 消耗 | 高并发时占用服务器 CPU | 构建阶段消耗 CPU，运行时几乎零消耗 |
| 配置复杂度 | 简单：gzip on+gzip_types | 需要插件 + 配置 Nginx 支持.gz文件 |
| 文件存储 | 不占额外磁盘空间 | 占额外空间（生成.gz文件） |
| 性能 | 小文件差异不大，长连接 + HTTP2 可快速传输 | 高并发大文件优势明显 |
3️. 实际项目选择建议
本地开发或小型项目
- 只使用Nginx Gzip就够了
- 简单配置即可，无需插件
大型项目 / 高并发部署
推荐在构建阶段生成压缩文件（
vite-plugin-compression）配合 Nginx 配置：
location /assets/ { gzip on; gzip_static on; # 直接返回 .gz 文件 expires 1y; add_header Cache-Control "public, immutable"; }优点：请求时不再动态压缩，CPU 占用低，性能更稳定
四、常见问题
1️. Nginx 配置作用域规则
Nginx 配置指令有全局、http、server、location作用域
某些指令只能在 http/server 级别生效，或者全局继承
gzip on;指令就是典型例子：- 可以在http或server块中开启
- 在location 块中开启，有些版本/编译方式不生效，导致 gzip header 不加
官方文档也说明：
gzip可以在 http、server 或 location 块启用，但有些版本 location 中开启可能不触发gzip_static的Content-Encoding逻辑
2.gzip_static on;的作用
如果请求的文件存在.gz压缩文件，直接返回该文件给浏览器。
请求流程（开启 gzip_static）：
浏览器请求资源
app.js，并发送Accept-Encoding: gzipNginx 检查：
- 是否存在
app.js.gz - 浏览器是否支持 gzip
- 是否存在
如果条件满足：
- 返回
app.js.gz文件内容 - 必须开启全局
gzip on;才会自动添加Content-Encoding: gzip响应头
- 返回
浏览器收到响应后自动解压显示
3.gzip_static on; + 静态压缩文件与gzip on;同时存在？
优先级原则
如果请求的资源存在
.gz文件，且浏览器支持 gzip- Nginx优先使用
.gz文件（gzip_static） gzip on不会再次压缩.gz文件
- Nginx优先使用
如果请求的资源没有
.gz文件- Nginx 会使用
gzip on对原文件进行动态压缩
- Nginx 会使用
注意：
想要开启gzip压缩，gzip on;必须开启全局，才能自动添加Content-Encoding: gzip响应头。
只有gzip_static是不会生效的。
🚀 感谢阅读！想了解更多？
📖 我的博客网站 | 记录思考，分享干货
🏡 我的个人主页 | 关于我、开源项目
