必须同时配置前端生成.gz文件和Nginx启用gzip_static on并重启服务,缺一不可;仅webpack压缩或仅Nginx开启gzip均无法生效。

uni-app H5打包后 chunk-vendors.js 没被 gzip 压缩?先看 Nginx 配了没
前端生成 .gz 文件只是第一步,真正决定浏览器收到的是不是压缩内容的,是服务器是否识别并返回它。常见现象:Network 面板里 chunk-vendors.js 的响应头没有 Content-Encoding: gzip,哪怕本地能看到 chunk-vendors.js.gz 文件,也说明没生效。
必须确认 Nginx 配置中同时满足以下三点:
-
gzip on;已开启(不是注释掉) -
gzip_static on;必须显式启用(仅靠gzip on不会自动查找并返回已存在的.gz文件) - Nginx 服务已
nginx -s reload或重启(改完配置不重载等于没改)
vue.config.js 里配 compression-webpack-plugin,版本和参数很关键
用错版本或漏参数,.gz 文件可能根本不会生成,或者只生成了部分类型。当前稳定组合是:webpack@4.46.0 + compression-webpack-plugin@6.1.1(uni-app CLI 3.3+ 默认用 webpack 4)。
最小可用配置要点:
-
test: /\.js$/必须写,否则 JS 不进压缩流程(CSS、JSON 等可额外加,但 JS 是重点) -
threshold: 10240表示只压缩 ≥10KB 的文件,避免小文件无效生成 .gz 增加 I/O -
exclude: /node_modules\//必须保留,否则插件在解析某些含动态 require 的模块时会卡死或报错
treeShaking 和 gzip 是两回事,别指望一个代替另一个
manifest.json 里开 "treeShaking": { "enable": true } 能删掉未引用的模块代码,但它对字符串字面量、模板编译产物、内联样式完全无效;而 gzip 对所有文本类资源(JS/CSS/HTML/JSON)一视同仁地压缩。
比如你用了 uView 的 u-button,treeShaking 可能帮你剔除 u-calendar,但剩下的 Vue runtime、uni-app 底层逻辑、按钮组件本身的 JS 字符串,依然全是明文——gzip 就是干这个的,通常能把 900KB 的 chunk-vendors.js 压到 280KB 左右。
为什么 Network 面板看到 .js 请求却没走 .gz?检查 Accept-Encoding 和路径匹配
即使 Nginx 和 webpack 都配对了,仍可能失败。两个隐蔽原因:
- 浏览器请求头没带
Accept-Encoding: gzip(极少见,但某些调试代理或老旧 WebView 可能丢掉) - 请求路径和磁盘上
.gz文件路径不一致(例如 Nginxroot设置错误,或location块里用了alias导致文件查找路径偏移)
最直接验证方式:curl 命令手动请求,看响应头:curl -H "Accept-Encoding: gzip" -I https://yourdomain.com/js/chunk-vendors.js,返回里要有 Content-Encoding: gzip 才算真生效。











