如何在不弹出的情况下压缩create react app中的构建文件？

Question

我试图弄清楚如何最好地优化我的构建文件并遇到了压缩文本文件的概念，例如 js 和 css。从我遇到的每篇文章来看，要么假设您可以访问 webpack 配置文件，要么您'已经被CRA开除了。 我不想。

所以我在我的 package.json 文件中添加了一个构建后脚本：

"scripts": {
    "build": "npm run build --prefix client",
    "prod-compress": "gzip client/build/static/js/*.js && gzip client/build/static/css/*.css",

这导致/client/build/static/js和/client/build/static/css文件夹如下所示：

然后我进入我的 app.js 文件并添加以下代码：

app.get('*.js', function(req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/javascript');
    next();
});

app.get('*.css', function(req, res, next) {
    req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/css');
    next();
});

如果我正确理解发生了什么，f/e /client/public/index.html文件仍将引用常规.js文件。 但是，当从服务器请求该文件时，它将使用.js.gz文件进行响应。

但是，当我压缩文件时，整个站点都变成了空白，就像找不到任何可以提供的东西一样。

Answer 1

如果您不介意添加新的依赖项，我建议您使用express-static-gzip它将自动为您的压缩文件提供服务：

const express = require("express");
const expressStaticGzip = require("express-static-gzip");
const app = express();

const buildPath = path.join(__dirname, '..', 'build', 'static');
app.use("/", expressStaticGzip(buildPath);

您还可以通过传递选项 object 来选择添加其他类型的压缩，例如 brotli：

const buildPath = path.join(__dirname, '..', 'build', 'static');
  app.use(
    '/',
    expressStaticGzip(buildPath, {
      enableBrotli: true,
      orderPreference: ['br', 'gz']
    })
  );

Brotli 为您提供比 gzip 更优化的文件，但并非所有浏览器都支持它。 值得庆幸的是，express-static-gzip 会根据用户浏览器发送给它的Accept-Encoding/Content-Encoding header 自动选择要发送的正确文件。

如果你想使用 brotli，我建议你看看compress-create-react-app 。 它专为 React 应用程序而设计，但应该适用于任何文件。

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