关键在于前端生成.gz文件与Nginx启用gzip_static on;配对生效,缺一则压缩无效;需显式配置test、threshold、algorithm及Nginx的gzip_types等参数。

直接生效的关键不是改代码,而是配对:前端打包生成 .gz 文件 + 服务器识别并返回它。缺一不可,只做一半等于白干。
vue.config.js 里怎么配 compression-webpack-plugin
必须新建项目根目录下的 vue.config.js,不能只靠 manifest.json 或 HBuilderX 内置配置。重点是插件版本和参数组合要匹配当前 uni-app CLI(2026 年主流为 webpack@4.46.0 + compression-webpack-plugin@6.1.1)。
-
test: /\.js$/必须显式写上,否则 CSS、JSON 等资源不会被压缩(即使你只关心 JS) -
threshold: 10240表示「大于 10KB 才生成 .gz」,设成 0 会导致大量小文件无效压缩,拖慢构建且无收益 -
exclude: /node_modules/要保留,否则插件在解析某些含动态 require 或循环引用的模块时会卡死或报错 -
algorithm: 'gzip'必须指定,低版本插件默认用 brotli,而 Nginx 默认不支持 brotli 静态服务
Nginx 怎么配才能让 .gz 文件真正生效
光有 gzip on; 不够,关键在 gzip_static on; —— 它告诉 Nginx:如果请求的是 chunk-vendors.js,且同目录下存在 chunk-vendors.js.gz,就直接返回后者,不走实时压缩。
- 必须同时开启:
gzip on;+gzip_static on;,缺一不可 -
gzip_min_length 1k;建议设为 1k,避免小文件触发压缩逻辑但又没生成 .gz -
gzip_types至少包含application/javascript和text/css,否则 CSS 不会被识别 - 改完 Nginx 配置后必须
nginx -s reload或重启服务,否则旧配置仍在内存中运行
为什么 Network 面板看到 .gz 文件却没被加载
这是最常遇到的“假成功”现象:打包后确实生成了 chunk-vendors.js.gz,但浏览器 Network 面板里请求的仍是未压缩的 .js,Size 列显示原始体积。
- 第一排查点:
gzip_static on;是否漏配或拼错(比如写成gzip_static on少了分号) - 第二排查点:Nginx 是否真的重载了配置?
ps aux | grep nginx看主进程启动时间是否更新 - 第三排查点:请求头是否带
Accept-Encoding: gzip?Chrome 默认带,但某些代理或调试工具可能删掉它 - 第四排查点:文件权限。Nginx worker 进程能否读取
.gz文件?ls -l chunk-vendors.js.gz看 owner/group 是否匹配
最容易被忽略的是 Nginx 的 gzip_static on; 和 webpack 插件的 algorithm: 'gzip' 必须严格对应——前者只认 .gz 后缀,后者若输出 .br 或其它格式,就完全失效。











