Question

我正在使用react-scripts build进行生产准备就绪并将其部署到AWS服务器上，我正在使用

GENERATE_SOURCEMAP=false yarn build && aws s3 sync build/ s3://*********

有什么方法可以应用gzip压缩来生成文件，并将gzip压缩的文件包含到index.html中，然后将其部署到aws上，以便在浏览器中提供gzip压缩的文件。

Answer 1

更改cra的构建过程并不是一件容易的事，您可以将其弹出，但是之后必须自己创建。但是，在package.json中，您可以定义在构建后启动的任务：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "node yourNodeGzipScript.js"   }

希望它可以提供帮助。

Answer 2

安装gzipper软件包（https://www.npmjs.com/package/gzipper）。像这样修改构建命令

"build": "react-scripts build && gzipper --verbose ./build"

并构建您的项目，您将同时获得gzip和常规文件。由您自己决定让服务器提供gzip而不是常规文件。如果您使用的是nginx，则必须在nginx.conf文件中设置服务器，如下所示：

server {
        # Gzip Settings
        gzip on;
        gzip_static on; # allows pre-serving of .gz file if it exists 
        gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
        gzip_proxied any; # enable gzip for all proxied requests
        gzip_buffers 16 8k; # number and size of buffers to compress a response
        gzip_http_version 1.1;
        gzip_min_length 256; # Only gzip files of size in bytes
        gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
        gunzip on; # Uncompress on the fly
        listen       4000;
        server_name  localhost;



        location / {
            root   html/react-app;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


    }

Answer 3

我使用此命令gzip文件使它们保持相同的名称

- yarn global add gzipper
- gzipper compress ./build ./gzip_build --output-file-format [filename].[ext] --verbose

仅供参考：gzipipper --verbose给我一个错误。缺少“压缩”。

Answer 4

您还可以使用以下命令在package.json中添加一个postbuild脚本：

JsonSerializer

如何压缩带有/不带有弹出create-react-app的构建。还应将压缩文件包含在脚本标签中，并包含在index.html中

4 个答案: