您可以运行任何postbuild命令，就像JackHack演示的那样。但我也会添加以下选项来删除“.gz”扩展名，以保持使用原始文件名：

"scripts": {
  ...
  "build": "react-scripts build",
  "postbuild": "find /path/to/build/static -type f \\( -name \\*.js -o -name \\*.css \\) -exec gzip {} \\; -exec mv {}.gz {} \\;"
},

最简单的方法可能是修改你的package.json。
在脚本中添加“postbuild”部分。例如，类似这样的东西：

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "tar -cvzf your_react_app_name.tar.gz /path/to/your/build/artifacts"
}

生成后应在生成运行后自动运行。如果你没有焦油：

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "cd /path/to/your/build && gzip *.js && gzip *.css"
}

或者使用zip：

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "zip -r your_app.zip /path/to/your/build"
}

Windows PowerShell：

"scripts": {
"build": "YOUR BUILD COMMAND"
"postbuild": "Compress-Archive -Path C:\path\to\your\build\* -CompressionLevel Optimal -DestinationPath C:\export\path\your_app_name.zip"
}

上面的答案告诉你如何简单地将捆绑时创建的.js和.css文件转换为. js.gz和. css.gz文件。在某些情况下，您可能不想将文件转换为gzip，而是将这些.js和.css文件作为gzip压缩文件提供。为此，您实际上不需要更改代码，但需要更改服务器配置。
例如-如果你的React应用是使用NGINX服务器部署的，那么你可以通过添加以下配置来提供gzip压缩的构建文件：

gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

因此，您的最终配置可能看起来像：

server {
    listen 8080;
    server_name  nginx.test.com;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 0;
    gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

    location / {
        root /data/www;
    }
}

上述性质的解释如下：

gzip on：许多Nginx服务器的默认配置。它将启用gzip，但仅适用于MIME类型text/html。
gzip_disable“msie6”：禁用gzip的浏览器不支持它-IE 4 -6
gzip_vary on：让浏览器决定是否接受gzip。
gzip_proxied any：启用所有代理请求的压缩。
gzip_comp_level：此设置将设置gzip的压缩级别。默认级别为6，这应该适用于大多数用例。
gzip_buffers：设置用于压缩响应的缓冲区的数量和大小。
gzip_http_version：设置压缩响应所需的请求的最低HTTP版本。
gzip_min_length 0：这将指定仅使用超过特定大小（KB）的gzip文件。

我偶然发现了这个问题，但没有得到解决方案，所以张贴的解决方案，我发现并为我工作。

试试这个，对我有效，希望对你也有效.

"postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css"

其他答案在许多情况下都很好，但如果您想要一个轻量级的生产选项，并且碰巧通过AWS CloudFront为您的应用提供服务，那么您可以利用CloudFront配置来让CloudFront为您压缩符合条件的react构建文件。
用CloudFront AWS docs的话说（截至2021年6月）：
您可以使用CloudFront自动压缩某些类型的文件，并在查看器支持这些文件时提供压缩文件（查看器使用Accept-Encoding HTTP标头指示其对压缩文件的支持）。CloudFront可以使用Gzip和Brotli压缩格式压缩文件。当查看器支持这两种格式时，CloudFront使用Brotli。
我很感激它在我的构建中减少了一件需要管理的事情，但要注意的是，这可能不适用于所有用例，例如如果您试图在本地或管道CI/CD环境中运行性能测试，大小验证等。这取决于您的需求和基础设施设置，但如果您只需要它用于生产和使用CloudFront，那么这可以在本地减少一些开销。

• 注意：看起来不太可能的是，React-app项目将添加此功能作为构建配置，因为他们已经拒绝了各种尝试/请求，以支持内部（例如，问题#1908和#3169）。听起来他们希望后期构建脚本或服务器来处理压缩。

注意，如果你通过package.json的postbuild手动压缩，你还需要手动添加gzip编码头。比如说nginx：

location / {
        ...
        ...
        if ( $uri ~* "static/.*.(css|js)$" ) {
            add_header Content-Encoding gzip;
        }
    }