如何在不缩小的情况下构建 React 的生产版本？答案

【问题标题】：How to build a production version of React without minification?如何在不缩小的情况下构建 React 的生产版本？
【发布时间】：2025-12-03 07:30:01
【问题描述】：

背景

我或多或少一直在关注the official guide to setup a local dev environment with react，它似乎使用create-react-app，这确实设置了很多。

现在，如果我运行npm run build，我会得到build 文件夹中所有内容的缩小版本。但是，如果我运行npm start，NodeJS 服务的版本似乎没有任何修改。但我看不到这些文件。

问题

所以要么：

我可以在某处访问npm start 生成的文件吗？因为这些似乎没有修改。（build 从未在此处修改过）
或者我可以以某种方式运行npm run build，以便它使用未最小化的文件进行“开发”构建？

尝试

我的目标只是访问最小化版本的 react 脚本。

至于最后一个问题我试过some parameters and enironmental variables as suggested in this question，但是如你所见，它失败了：

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

系统

我的package.json 有默认脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

注意：请不要问我为什么这样做或试图说服我这样做是不好的。我可能想要这个的原因有很多，例如调试或this specific use case。

【问题讨论】：

顺便说一句，这似乎是一件非常困难的事情，我已经asked the create-react-app devs，这是否可以在他们的脚本中默认实现。

标签： node.js reactjs minify create-react-app react-scripts

【解决方案1】：

要更改 webpack 配置和构建脚本，您必须从 create-react-app 中弹出（我不推荐此步骤，因为它会破坏未来的兼容性），或者您可以使用 rewire 之类的工具来覆盖某些设置

看看这个 https://github.com/timarney/react-app-rewired

我个人使用只是重新接线

npm i rewire --save-dev

这是我过去为我的一个项目创建的示例配置，效果非常好！

创建一个 build.js
更改您的 package.json 以使其运行 build.js

build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

然后在我的 package.json 中，我像这样更改了 npm 脚本链接（将运行 build.js 脚本的节点构建）

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

所以如果你真的想从 create-react-app 中弹出，你所要做的就是运行

npm run-script eject

然后您将获得一个新文件夹，其中包含 create-react-app 使用的所有配置

但正如我之前所说，没有理由不使用 rewire 并且只是覆盖配置而不是弹出

如果有帮助，请不要忘记标记为答案干杯并取得好成绩

【讨论】：

这个信息让我走上了战争之路，谢谢。我切换到react-app-rewired。按照步骤 1-3 到config-overrides.js，并使用传播运算符修改默认 webpack 配置。
我使用上面的脚本加上：config.optimization.minimize = false;
在我的例子中，minifier 是索引 4.. 而不是使用 config.plugsin[5]，你最好使用类似：const minifier = config.plugins.find((plugin) => plugin.constructor.name === "MiniCssExtractPlugin"); 以避免在创建反应应用程序构建脚本被更改时出错。
^ 当我这样做时返回 null - 你确定你的名字是对的，@uɥƃnɐʌuop 吗？ const minifier = config.plugins.find((plugin) => plugin.constructor.name === "MiniCssExtractPlugin");
@dylanh724，不，我不确定它通常是什么，我只知道当我离开评论时它正在工作。它可能是特定于配置的，或者从那时起可能已经改变。我记得我注销了每个插件的 constructor.name 以获得MiniCssExtractPlugin

【解决方案2】：

为什么看不到源文件？这是我会尝试的：

使用npm run start 启动您的 React 应用程序
打开浏览器到http://localhost:3000
打开开发者工具并检查由 webpack-dev 服务器创建的分块包。在 Mac 上的 Chrome 中，您可以执行以下操作：cmd+option+j 将打开开发者工具。然后点击 sources 选项卡：在此选项卡中，您将看到由 react 的构建配置创建的包。现在，这些包的输出可能并不漂亮，但都在那里。

或者，即使您使用create-react-app，您的所有应用程序的构建配置设置都包含在您的webpack.config.js 文件中。因为这个配置只是封装在react-scripts 节点模块中。所以也许你可以尝试直接编辑这个文件，而不弹出：<base_path>/node_modules/react-scripts/config/webpack.config.js。尽管您需要小心不要破坏现有的配置设置。您可能想弄乱生产构建的source-map 设置。至少这样，如果你破坏了这个文件，你总是可以删除并重新安装react-scripts，然后回到你的初始配置。这也将允许您在“半安全”沙盒环境中进行自定义。请记住，create-react-app 并没有提供任何魔法，它只是为您的构建配置提供了有用的默认值。

最后，正如@xzesstence 指出的，您可以试用react-app-rewired 模块。

希望对您有所帮助！

【讨论】：

虽然您提出的所有建议在技术上都是可行的，但它似乎是一个很大的解决方法，当我更新 npm 模块时可能会中断。而且实际上并没有按照设计/预期的方式使用工具（npm 等）。通过浏览器导出也很丑陋，例如想要一个目录中的所有文件，但在浏览器中我只能打开单个文件，并且可以手动复制/粘贴它们，但是不......这永远不适合开发人员的工作流程。（尤其是因为我需要经常这样做！）
那么您应该尝试重新布线的方式，这不是解决方法，它不会破坏任何东西..您实际上只需添加一个 build.js 就像我发布的那样，然后根据需要修改配置..您可以不受任何限制地更新依赖项，并且永远不会丢失配置。首先我和你一样想，为什么这么复杂，但它真的很简单，而且他们添加默认配置作为依赖项是有逻辑的原因的。总的来说，我真的可以推荐它一个很好的解决方案。我在一个巨大的生产环境中使用了几次，试一试，看看你得到了什么
不确定我是否同意，但我也认为这是每个开发人员的个人偏好。没有导出到您只是使用开发人员工具的浏览器，就像它们用于第一个选项的方式一样。这是开发人员工具的重点，因为它是每个前端开发人员日常的一部分，开发工具是一个很棒的工具集。第二个选项是修改 webpack.config.js 中的构建配置以获取推荐的构建目录文件。尽管您可以肯定地破坏一个模块，但它只是一个简单的安装即可恢复正常
这还取决于您希望如何使用 create-react-app，因为它旨在提供适合大多数用例但不适合个人定制的良好默认值。 create-react-app 背后没有什么神奇之处，它只是为构建配置提供了一个有用的项目结构和良好的默认值。它有点混淆了这个好/坏的细节，但如果你不使用 create-react-app 你将不得不设置这些细节。至于库选项，我明白你的意思，我个人并不反对它，因为我喜欢进行精细控制并提供我自己的构建配置
但是使用该库为新团队成员的学习增加了一层额外的复杂性，因此您必须权衡它与仅仅拥有一个工作配置。但最终这是个人喜好，只要一切正常，就没有错误的选择:)

【解决方案3】：

我想要一个 React 应用程序的未混淆代码 - 主要是出于好奇，我有源代码 - 同时需要在 Angular 中重写它（生成一个更易于维护的应用程序，只有 5% 的大小和 1% 的依赖项）。

我没用过 React 是通过修改文件发现的

/node_modules/react-scripts/config/webpack.config.prod.js

并将 module.exports 下的大型优化配置项替换为以下内容...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm run build 构建了未混淆、可读的代码，可以按预期运行，无需进行其他修改。仅使用命令 npm install、npm run build 和 npm start 使用 Gitbash - 只是觉得有人可能会觉得这很有用。

我不建议这样做，因为您想要的代码仍然包装在 webpack eval 混乱中。从源代码中挑选有用的部分或重新构建应用程序更容易。充其量，我得看看集群反应和 webpack 是什么。

【讨论】：

我正在运行 VS2019，上面的内容对我不起作用。没有 webpack.config.prod.js 文件只有 webpack.config.js。我确实在 webpack.config.js 中找到了“优化”键并将其替换为上面的，但它仍然发布了缩小的输出。无论如何谢谢！
使用那个仍然对我有用。也许存储配置文件，如果它构建，则有多个配置。另外，我只使用 gitbash npm 命令构建。
感谢您挖掘这个！荒谬的是图书馆不会让你轻松地覆盖它

【解决方案4】：

我知道现在回答这个问题为时已晚，但试试这个npm i -D cra-build-watch。

我觉得这个库被低估了，但它只是观察 react 应用程序的变化，不会一次又一次地重新构建整个包。

尽管重新布线有助于通过不缩小构建来帮助构建，但是它仍然会一次又一次地经历构建的整个过程。

【讨论】：

【解决方案5】：

文件保存在服务器进程内存中，不写入磁盘，除非您弹出脚本（或者如果可以使用“rewire”之类的工具）并修改它们以使用 @987654322 将其写入磁盘@ 选项，如the webpack DevServer docs 中所述。

但是，您可以通过导航到服务器下的 webpack-dev-server 端点来获取实际的文件列表/链接。

例如，如果在 localhost:3000 使用默认 url，则使用以下 url 来查看服务器上的所有文件：

http://localhost:3000/webpack-dev-server

但您真正需要的只是 index.html（通常只是一个加载 JS 文件的存根）和以下 3 个 JS 文件，它们在所有 create-react-app 安装中似乎都是一致的，以及它们各自的源映射文件。

main.chunk.js
bundle.js
vendors~main.chunk.js

您可以直接右键单击页面上的链接并保存它们，或者您可以直接导航链接或从 Chrome 开发工具的“来源”选项卡中获取它们。

请注意，对于代码更改，通常只更新 main.chunk.js 文件，因此对于一般的代码更改，您可能只获取更新后的 main.chunk.js 和 main.chunk.js.map 文件。

【讨论】：