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

Question

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

我希望文件被 gzip

Answer 1

上面的答案告诉您如何简单地将捆绑时创建的 .js 和 .css 文件转换为 .js.gz 和 .css.gz 文件。在某些情况下，您可能不想只将文件转换为 gzip，而是将这些 .js 和 .css 文件作为 gzip 压缩文件提供。为此，您实际上不需要更改代码，但需要更改服务器配置。

\n

例如 - 如果您的 React 应用程序是使用 NGINX 服务器部署的，那么您可以通过添加以下配置来以 gzipped 压缩形式提供构建文件：

\n

    gzip on;\n    gzip_disable "msie6";\n    gzip_vary on;\n    gzip_proxied any;\n    gzip_comp_level 6;\n    gzip_buffers 16 8k;\n    gzip_http_version 1.1;\n    gzip_min_length 0;\n    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;\n

\n

所以你的最终配置可能如下所示：

\n

server {\n    listen 8080;\n    server_name  nginx.test.com;\n\n    gzip on;\n    gzip_disable "msie6";\n    gzip_vary on;\n    gzip_proxied any;\n    gzip_comp_level 6;\n    gzip_buffers 16 8k;\n    gzip_http_version 1.1;\n    gzip_min_length 0;\n    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;\n\n    location / {\n        root /data/www;\n    }\n}\n

\n

上述属性的解释是：

\n

gzip on：许多 Nginx 服务器的默认配置。它将启用 gzip，但仅适用于 MIME 类型 text/html。

\n

gzip_disable \xe2\x80\x9cmsie6\xe2\x80\x9d : 对不支持 gzip 的浏览器禁用 \xe2\x80\x94 IE4\xe2\x80\x936

\n

gzip_vary on：让浏览器决定是否接受gzip。

\n

gzip_proxied any：为所有代理请求启用压缩。

\n

gzip_comp_level：此设置将设置 gzip 的压缩级别。默认级别为 6，这应该适用于大多数用例。

\n

gzip_buffers：设置用于压缩响应的缓冲区的数量和大小。

\n

gzip_http_version：设置压缩响应所需的请求的最低 HTTP 版本。

\n

gzip_min_length 0：指定仅大于特定大小（以 KB 为单位）的 gzip 文件。

\n

我偶然发现了这个问题，但没有得到解决方案，因此发布了我找到并为我工作的解决方案。

\n

Answer 2

最简单的方法可能是修改你的 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"
}

Answer 3

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

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