文章目录一、 服务器端开启 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/svgxml;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.htmlVue3 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 中这样配置importcompressionPluginfromvite-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 Gzipvite-plugin-compression压缩时机请求时服务器动态压缩构建时生成静态压缩文件CPU 消耗高并发时占用服务器 CPU构建阶段消耗 CPU运行时几乎零消耗配置复杂度简单gzip ongzip_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文件且浏览器支持 gzipNginx优先使用.gz文件gzip_staticgzip on不会再次压缩.gz文件如果请求的资源没有.gz文件Nginx 会使用gzip on对原文件进行动态压缩注意想要开启gzip压缩gzip on;必须开启全局才能自动添加Content-Encoding: gzip响应头。只有gzip_static是不会生效的。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目