reactjs - 如何在不弹出 create-react-app 的情况下压缩构建。还将压缩文件包含到 index.html 中的脚本标记中

Question

我正在使用 react-scripts build使生产就绪构建并将其部署在我使用的 AWS 服务器上 GENERATE_SOURCEMAP=false yarn build && aws s3 sync build/ s3://*********
有什么方法可以应用 gzip 压缩来构建文件并将 gzip 压缩文件包含到 index.html 中并将其部署在 aws 上，以便在浏览器中提供 gzip 压缩文件。

Answer 1

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


    }