reactjs - 打包时如何减少 React 应用程序构建时间和理解 webpack 的行为

Question

最近我正在尝试优化 Web 应用程序(React)的性能。假设它有点重，因为它由代码编辑器、Firebase、SQL、AWS SDK 等组成。所以我集成了 react-loadable这将延迟加载组件，之后，我遇到了这个 Javascript 堆内存不足问题。FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in React经过一些研究(从 friend 那里)，我开始知道如果我们保留太多延迟加载，webpack 会尝试并行捆绑它们这可能是导致 Javascript 堆内存问题的原因，以确认我删除了所有延迟加载路由在我的应用程序中构建。现在构建成功。后来按照社区的建议，我增加了 Node 堆空间大小并获得了以下见解
首先我将它增加到 8 GB(8192) 然后构建成功我的构建时间约为 72 分钟 , 从下一次开始我到处逛 20 分钟 .然后我将堆内存大小减少到 4 GB(4096) 并获得构建成功大约是 15 - 20 分钟 .系统配置为 2vCPU，16GB RAM(AWS EC2 实例 r5a.large) .
接下来，我继续构建另一个系统( Mac book pro, i5, 8 GB RAM, 4 Cores )现在花了 30 分钟 , 第二次花了 20 分钟
所以从这些数据点，我有几个问题

每当我们添加一些代码时，我们是否需要不断增加堆空间？如果是，社区中的平均堆内存大小是多少

这些类型的重型应用程序的构建系统的通常配置是什么，为什么因为现在我不确定是否增加内核或 RAM 或堆空间的数量，或者与我们的应用程序代码有关。

webpack 是否提供任何类型的解决方案来避免堆内存问题，例如限制并行进程或任何插件？

如果它与我们的应用程序代码有关，是否有任何标准流程可以调试占用内存的位置并基于该流程进行优化

PS : 有人建议保留 GENERATE_SOUCREMAP=false它成功了，但我们需要源映射，因为它们将有助于调试生产问题

Answer 1

最后，我可以解决 heap out of memory不增加堆内存空间的问题。
如问题中所述，如果我删除所有延迟路由构建成功或者我必须保留 4GB 堆空间才能在大量构建时间下成功。当使用 4GB 堆空间构建成功时，我观察到将近 8 - 10 个块文件大小接近 1MB。所以我使用 Source map explorer 分析了所有这些块.在所有块中都包含几乎相同的库代码(在我的情况下，它们是 Firebase、视频播放器等，它们很重)
所以在我的假设中，当 webpack 试图捆绑所有这些块时，它必须在每个块中构建所有这些库依赖关系图，这反过来会导致堆内存空间问题。所以我用了 Loadable components延迟加载这些库。
延迟加载所有这些库后，所有块文件的大小几乎减少了一半，并且构建在不增加任何堆空间的情况下获得成功，构建时间也减少了。
优化后如果我继续构建 6vCPU , i7 系统 它正在四处走动 3 - 4 分钟 我观察到基于系统构建时间中可用的核心数量正在减少。如果我继续在 2vCPU 系统中构建它有时需要大约 20 - 25 分钟