实战讲解 Nginx 针对 React 应用开启 gzip_static 预压缩分发-Nginx-PHP中文网

react构建需手动添加compression-webpack-plugin生成.gz文件，nginx通过gzip_static on直接分发预压缩文件，降低cpu开销并加速首屏加载，前提是保留原始文件且正确配置location匹配规则。

实战讲解 nginx 针对 react 应用开启 gzip_static 预压缩分发

React 应用构建后生成的是静态文件（index.html、main.[hash].js、App.[hash].css 等），Nginx 通过 gzip_static on 可直接分发预压缩的 .gz 文件，跳过实时压缩，显著降低 CPU 开销并加快首屏加载——前提是正确配置构建、文件部署和 Nginx 行为。

1. 构建阶段：生成 .gz 文件

React 默认不产出 .gz 文件。需在构建流程中显式添加压缩步骤：

使用 compression-webpack-plugin（v9+ 支持 Webpack 5）：

  # webpack.config.js（或 craco.config.js / vite.config.ts 中对应配置）
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg|txt|eot|woff|woff2|ttf|png|jpg|gif)$/i,
      threshold: 10240, // ≥10KB 才压缩
      minRatio: 0.8,
      deleteOriginalAssets: false // 保留原始文件，.gz 与原文件同名同目录
    })
};

执行 npm run build 后，输出目录（如 build/）中每个 .js、.css 等文件旁会多出同名 .gz 文件，例如：
static/js/main.a1b2c3d4.js → static/js/main.a1b2c3d4.js.gz
关键点：不要删除原始文件；gzip_static 依赖原文件存在，仅用于“替换响应体”，不是替代方案

2. Nginx 配置：启用 gzip_static 并匹配路径

在服务 React 的 location 块中启用 gzip_static，并确保其他 gzip 相关设置协同工作：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

  # nginx.conf 或 site config 中的 server/location 段
server {
  listen 80;
  root /var/www/my-react-app/build;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
  # 关键：对静态资源启用 gzip_static
  location ~* \.(js|css|svg|json|txt|woff2?|ttf|eot|png|jpe?g|gif)$ {
    gzip_static on;
    expires 1y;
    add_header Cache-Control "public, immutable";
  }