Nginx开启Gzip后React打包文件没被压缩？

南宫佳宜提问于 2026-03-14 07:07:20 阅读 5

工具

我用 create-react-app 打了个前端项目，build 之后部署到 Nginx 上，明明在 nginx.conf 里配了 gzip on，也加了 gzip_types 包含 application/javascript，但 Chrome DevTools 里看 bundle.js 的响应头根本没有 Content-Encoding: gzip，体积还是很大。是不是 React 打包出来的文件名带 hash 导致匹配不到？

这是我的组件代码，很普通：

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello Gzip?</h1>
      <p>这页面打包后有 1.2MB，Nginx 却不压缩</p>
    </div>
  );
}

export default App;

我来解答赞 5 收藏

反馈

1 条解答

婧妍的笔记 Lv1

这个问题很常见，不是文件名带 hash 的问题，gzip_types 匹配的是 MIME 类型，跟文件名无关。

先确认 Nginx 到底有没有在压缩，用 curl 测一下：

curl -H "Accept-Encoding: gzip" -I http://localhost/bundle.js

如果响应头没有 Content-Encoding: gzip，那问题一般在这几个地方：

1. gzip_types 漏了 react 打包的 MIME type。react build 出来的 .js 文件 MIME type 是 application/javascript，但你需要确认 nginx.conf 里配的是 application/javascript 还是 application/x-javascript，有时候差一个 x 就不行。最好写成这样：

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

2. gzip_min_length 设置太长。默认是 20 bytes，如果你的 bundle.js 太小可能不压缩，但你说 1.2MB 应该远超过这个值，所以不是这个问题。

3. 最坑的一个：Nginx 配置文件没 reload。你改完 nginx.conf 之后有没有执行 nginx -s reload？没 reload 的话配置根本不会生效。

4. 检查 Nginx 版本。老版本 Nginx 对某些 MIME type 支持不好，如果你用的是很老的版本，考虑升级。

5. 如果是前后端分离架构，检查有没有反向代理。如果你用 Nginx 代理到后端服务（比如 Node.js），需要在 proxy 配置里也开启 gzip：

location / {

    proxy_pass http://backend;

    proxy_set_header Accept-Encoding "";

}

上面这个 Accept-Encoding 设为空的话，代理层不会解压，gzip 就失效了。

你先去用 curl 测一下，看看响应头里到底有没有 Content-Encoding，基本就能定位问题在哪了。

2026-03-14 07:11