我使用 create-react-app 创建了一个 React 应用程序。我想在构建过程中对文件进行 gzip 压缩。
我希望文件被 gzip 压缩
您可以运行任何构建后命令，如 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 服务器部署的，那么您可以通过添加以下配置以 gzipped 压缩的形式提供构建文件：
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 的浏览器禁用 gzip — IE4–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 文档的话来说（截至 2021 年 6 月）：
您可以使用 CloudFront 自动压缩某些类型的文件，并在查看器支持时提供压缩文件（查看器使用 Accept-Encoding HTTP 标头表明他们对压缩文件的支持）。 CloudFront 可以使用 Gzip 和 Brotli 压缩格式来压缩文件。当查看器支持两种格式时，CloudFront 使用 Brotli。
我很欣赏它减少了我的构建中需要管理的一件事情，但会注意到这可能不适用于所有用例，例如如果您尝试在本地或管道中运行性能测试、大小验证等CI/CD 环境。仅取决于您的需求和基础设施设置，但如果您只需要它用于生产并使用 CloudFront，那么这可以减少本地的一些开销。
注意：create-react-app 项目似乎不太可能将此功能添加为构建配置，因为他们已经拒绝了内部支持它的各种尝试/请求（例如，问题 #1908 和 #第3169章 ）。听起来他们希望构建后脚本或服务器来处理压缩。
注意如果您通过package.json的postbuild手动压缩，您还需要手动添加gzip编码头。以 nginx 为例：
location / {
...
...
if ( $uri ~* "static/.*.(css|js)$" ) {
add_header Content-Encoding gzip;
}
}