reactjs - React Js - Typescript 4.2.3 JavaScript 堆内存不足

Question

我创建了一些 Typescript 类型来帮助我开发 React App。如果我单独使用它们，它们运行良好，它们速度很快，并且不使用任何额外的内存，正如预期的那样。当我尝试将它们与其他类型一起使用时，问题就开始了，并且在我的 reactjs 应用程序上显示 JavaScript heap out of memory .
我创建了这个 Playground ，用一个简单的例子来说明问题。
在操场上，注意这些类型:

// from line line #129 
type UseQueryOptions<T extends Base, K extends AllKeys<T, 4> > = Expand<T, K> 

type UseQueryOptions2<T , K  > = Expand_<T, K>  // line #129
type UseQueryOptions3<T , K  > = Expand_<T, K> extends infer O ? O : never  

type ExpandResult<T,K> = Expand_<T, K> extends infer O ? O : never
type UseQueryOptions4<T , K  > = ExpandResult<T,K>

如您所见，我尝试了多种解决方案来使用 Expand_与另一种类型。
然后，如果您尝试检查什么是 Expand_<T, K> (在第 129 行)(我的意思是，在操场上，将鼠标移到 Expand_ 上)，将显示弹出窗口，您将看到运行此类型的函数。通过此操作，Chrome 上的 typescript 工作人员使用的内存是稳定的 (20/22 MB)，并且弹出窗口中的信息按预期正确且快速地显示。
但是，如果您检查 UseQueryOptions[N] 中的任何一个(第 #129/#131/#132/#135 行)，内存将开始增长到 1.5GB(然后，我认为，Chrome 会切断工作线程)并且弹出窗口不会显示任何信息。
为了清楚起见，您将在下面找到我关于内存消耗的意思的图像:
在正常情况下，typescript 的 worker 使用小于 30Mb，如果您尝试检查类型 Expand在线 #108 或 let y1在第 113/#114 行:

但这是工作人员在我尝试检查 UseQueryOptions 时使用的内存。在 #129/#131/#132/#135 行输入:

所有这些解释都开始是因为我的 reactjs 应用程序也面临这个异常。
当我尝试运行时 react start ，添加我之前提到的类似类型后，控制台在 Files successfully emitted, waiting for typecheck results... 上被阻止和过程 node运行 react start增长直到达到节点上设置的内存限制(可以是 2Gb 或 8 Gb，但显示错误只是时间问题)，然后显示:

<--- Last few GCs --->

[16365:0x1046ca000]   448881 ms: Mark-sweep 2028.9 (2059.0) -> 2020.9 (2059.3) MB, 766.2 / 0.0 ms  (average mu = 0.132, current mu = 0.008) allocation failure scavenge might not succeed
[16365:0x1046ca000]   449641 ms: Mark-sweep 2028.9 (2059.3) -> 2020.9 (2059.3) MB, 754.6 / 0.0 ms  (average mu = 0.073, current mu = 0.007) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1012e4da5 node::Abort() (.cold.1) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 2: 0x1000a6239 node::Abort() [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 3: 0x1000a639f node::OnFatalError(char const*, char const*) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 4: 0x1001e9007 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 5: 0x1001e8fa3 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 6: 0x100397e95 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 7: 0x10039995a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 8: 0x100395029 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
 9: 0x1003928c1 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
10: 0x1003a115a v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
11: 0x1003a11e1 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
12: 0x10036eb87 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
13: 0x1006ed8d8 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]
14: 0x100a7a239 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/jure.prah/.nvm/versions/node/v14.16.0/bin/node]

如果我从我的项目中删除这些行，那么它会按预期运行并且没有任何错误，并且节点的内存约为 200 MB。
我希望这已经足够了，并且您拥有解决我的问题的所有信息。
否则，我将在这里为您提供更多信息。

Answer 1

我没有深入研究你的设置，或者你的本地内存使用率是否异常高，但是有这么多依赖项，你肯定有可能只是内存不足。当我在本地运行 React 应用程序时，我会增加 Node 进程可用的内存量:

"scripts": {
    "start": "NODE_OPTIONS='--max-old-space-size=8192' yarn start"
}

由于 JavaScript heap out of memory，因此经历了更少的崩溃。 .