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

【问题标题】：How to compress build with/without ejecting create-react-app. Also include compressed file into script tag into index.html如何在弹出/不弹出 create-react-app 的情况下压缩构建。还将压缩文件包含到脚本标记中到 index.html
【发布时间】：2019-04-16 09:24:04
【问题描述】：

我正在使用 react-scripts build 进行生产准备构建并将其部署在我正在使用的 AWS 服务器上

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

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

【问题讨论】：

通常我会通过 CloudFront 压缩文件。见：stackoverflow.com/questions/54655204/…
@CharlieHileman 我在 CloudFront 的帮助下完成了它，它运行良好。谢谢你的主意。这个link 有详细的操作方法。

标签： reactjs create-react-app

【解决方案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;
        }


    }

【讨论】：

我已经从云端解决了这个问题。但感谢您的解决方案。 :)
这应该是公认的答案。最详细和最有帮助的肯定
你应该添加compress来压缩命令将是：react-scripts build && gzipper compress --verbose ./build

【解决方案2】：

我使用这个命令来 gzip 文件，让它们保持相同的名称

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

仅供参考：gzipper --verbose 让我出错。错过了“压缩”。

【讨论】：

【解决方案3】：

你也可以在你的 package.json 中添加一个 postbuild 脚本：

"postbuild": "find ./build -type f -name '*.css' -o -name '*.js' -exec gzip -k '{}' \\;"

【讨论】：

【解决方案4】：

您可以使用compress-create-react-app 以最少的配置将构建后压缩添加到您的 create-react-app 构建中。它使用 brotli 和 gzip 算法压缩 build 文件夹中的所有 html、css 和 javascript 文件。

首先安装它作为开发依赖：

npm install compress-create-react-app --save-dev

然后在你的 package.json 中编辑构建命令：

    "scripts": {
    "start": "react-scripts start",
-   "build": "react-scripts build",
+   "build": "react-scripts build && compress-cra",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

就是这样。您的应用在构建时会被压缩。

免责声明：我是 compress-create-react-app 的作者

【讨论】：

有没有机会，我们可以在npm run start 上运行它？在 devtools 中使用灯塔调试时，它让生活更轻松。
我会看看我能做什么，但让 create-react-app 为压缩文件提供服务可能很困难。如果您对如何做有想法并想做出贡献，请随时在 GitHub 上提出拉取请求。
@jnsjknn 谢谢！我试过你的包，它似乎工作得很好。然后我通过app.use("/", expressStaticGzip(path.resolve(__dirname))); 提供我的静态资源

【解决方案5】：

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

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

希望对你有帮助。

【讨论】：

我可以压缩文件但无法更改注入的文件名，因为 .gz 必须包含在文件名的最后，例如从 ** .chunks.js 到 ** chunks.js.gz
您是否尝试过使用“fs”包的“重命名”或“复制”方法？
是的，我做到了，我制作了一个 .js 文件并使用 'fs' 来更新脚本和 css 标签。它奏效了……谢谢哥们。