如何在React应用程序中使用gzip压缩文件

Question

我使用create-react-app创建了一个React应用程序。我想在构建过程中压缩文件。

我希望文件能够被gzip压缩。

- sai prasad

Answer 1

您可以运行任何后构建命令，就像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 {} \\;"
},

- ian ray

---

注意：路径可以是相对的：./build/static - jobima

Answer 2

上面的答案告诉你如何简单地将 Bundling 时创建的 .js 和 .css 文件转换为 .js.gz 和 .css.gz 文件。也许有一种情况，你不仅想将文件转换为 gzip 格式，而是要将这些 .js 和 .css 文件作为已压缩的文件提供服务。为此，实际上您不需要更改您的代码，但需要在服务器配置中进行更改。

例如，如果您的 React 应用程序是使用 NGINX 服务器部署的，则可以通过添加以下配置来以 gzip 压缩的方式提供 build 文件：

    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;
    }
}

以上属性的解释如下： ：许多 Nginx 服务器的默认配置。它将仅为 MIME 类型为 text/html 的内容启用 gzip。 ：禁用不支持 gzip 的浏览器，如 IE4-6。 ：让浏览器决定是否接受 gzip 压缩。 ：为所有代理请求启用压缩。 ：此设置将设置 gzip 的压缩级别。默认级别为 6，在大多数情况下应该适用。 ：设置用于压缩响应的缓冲区数量和大小。 ：设置要求压缩响应的请求的最低 HTTP 版本。 ：指定仅压缩大小在一定 KB 数以上的文件。

我偶然发现了这个问题，但没有找到解决方案，所以我发布了我找到并对我有用的解决方案。

- aumiom

---

谢谢您提供的答案，对我帮助很大。我想在这里补充一点。我把gzip相关的配置放在了location配置之后，但是它对我没有起作用。将其放在location配置之前就可以了！因此，请确保在location配置之前放置gzip相关的配置，否则压缩将无法正常工作。 - aumiom

Answer 3

最简单的方法可能是修改您的package.json文件。

在scripts中添加"postbuild"部分。例如，以下内容：

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

构建后处理应在构建运行后自动运行。 如果您没有tar：

"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"
}

- JackHacks

---

如果您不想将它们打包成 tar 文件，可以执行 gzip *.js && gzip *.css 来进行 gzip 压缩。 - JackHacks

在构建时我遇到了这个错误，请您看一下。“tar”不是内部或外部命令，也不是可运行的程序或批处理文件。 - sai prasad

嗨，我使用另外两个命令也遇到了同样的错误（未被识别）。我尝试了npm install -g gzip和其他方法，但问题依旧。还有其他解决办法吗？（我使用的是Windows 10操作系统和默认的命令行界面） - sai prasad

你可以尝试从这里安装gzip：http://gnuwin32.sourceforge.net/packages/gzip.htm - JackHacks

我正在Windows中使用CMD。 - sai prasad

Answer 4

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

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

- Fausta Leonardo

---

当我将这行代码添加到package.json文件中时，我的网站显示为空白。 - Foysal imran

Answer 5

其他答案对许多情况都很好，但如果您想要一个轻量级的生产选项，并且碰巧通过AWS CloudFront提供应用程序，则可以利用CloudFront配置使CloudFront为您压缩合格的React构建文件。引用CloudFront AWS docs（截至2021年6月）的话说：

“您可以使用CloudFront自动压缩某些类型的文件，并在查看器支持它们时提供压缩文件（查看器使用Accept-Encoding HTTP标头指示其对压缩文件的支持）。CloudFront可以使用Gzip和Brotli压缩格式压缩文件。当查看器同时支持这两种格式时，CloudFront使用Brotli。”

我感谢它减少了我在构建中需要管理的事情，但请注意，这可能不适用于所有用例，例如如果您正在尝试在本地或管道CI / CD环境中运行性能测试、大小验证等。这取决于您的需求和基础架构设置，但如果您只需要在生产中使用CloudFront，那么这可以减少一些本地开销。

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

- cjn

Answer 6

请注意，如果您通过package.json的postbuild手动进行压缩，您还需要手动添加gzip编码头。例如，使用nginx：

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

- user3291332