简短的回答：kushalvm 的解决方案并不完整。为了用 gzip/brotli 压缩页面大小，有两个步骤：
- 在构建时创建
.gz/.br文件（或由服务器动态生成）
- 为他们服务（而不是
.js文件）
你正在做第一部分，而不是第二部分。因为当您构建一个反应项目时（在客户端渲染的情况下 - CSR），您只需创建一个.html导入一些脚本标签的文件（您的反应项目）。如果你为 webpack 使用brotli或压缩插件，你已经创建了一些.gz/.br文件，但 HTML 文件仍然会导入旧.js脚本。
那么您可以使用哪些不同的方法来提供配置服务器所需的压缩文件（您不能仅通过更改 React 配置来做到这一点）
解决方案
1）如果你使用客户端渲染，你可以创建一个自定义的 express server 来提供文件，它非常简单，不到 10 行代码，你可以阅读官方 React Docs 中的文档（带有express-static-gzip) 所以你的服务器文件将如下所示：
const express = require('express');
const path = require('path');
const app = express();
app.use(
expressStaticGzip(path.join(__dirname, 'build'), {
enableBrotli: true, // only if you have brotli files too
}),
);
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);
该服务器将读取构建目录中的文件，如果对某些 js 资产的请求到达，它会检查（浏览器是否支持压缩，以及是否存在压缩文件）然后提供压缩文件
2）如果您使用 SSR（例如Next.js或React-Starter-kit），您可以创建自定义快递服务器，并使用上述相同的方法。
3) 如果您使用 Apache 网络服务器，您可以使用 Apache gzip/brotli 压缩配置文件，如下所示：
# enable the rewrite capabilities
RewriteEngine On
# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore
# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /
# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.html $1\.html\.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.html\.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip
4) 如果您使用第三方 JamStack/CDN 提供商，如 Netlify 或 AWS，他们有一些配置供您启用动态 gzip。
