用于 Angular 测试的 JS 堆内存不足答案

【问题标题】：JS heap out of memory for Angular testing用于 Angular 测试的 JS 堆内存不足
【发布时间】：2019-04-23 02:57:36
【问题描述】：

我有一个内存问题，我正在努力解决，但我真的不知道从哪里开始。当我运行测试时，我遇到了一个 JS 堆问题，我的测试将在没有运行的情况下出错。我的预感是它是由我用于国际化的一个非常大的字符串文件引起的。这是一个继承的项目，所以我将概述目前正在发生的事情，也许有人可以帮助我想办法让它变得更好。

在主应用程序中

inject.en.js 文件是一个 2.2MB 的 json 文件，其中包含应用程序的翻译字符串。

var INJECT_en = { ... };

为了尽早提供它，它作为全局 var 包含在应用程序 index.html 中

<script src="js/languages/hybrid.inject.en.js" type="text/javascript"></script>

然后用于构建全局配置对象。

var windowJS =  new WindowService().nativeWindow;
var HybridInject = windowJS.HybridInject_en; // custom app strings
var INJECT = windowJS.INJECT_en;
var startInjector = _.merge(_.clone(HybridInject), _.clone(INJECT));

export const CONFIG: ConfigType = {
    ...
    strings: populateStrings(startInjector),
    ...

}

用于测试

出于多种原因，我使用 Jest 测试此应用程序。我尝试了一些方法来设置 Jest，以便在构建 CONFIG 时以相同的方式提供这些文件，并且我为我的 jestGlobalMocks.ts 选择了以下内容。

我将文件复制到测试目录中并将它们转换为export对象。

export const INJECT_en = { ... }

然后通过使它们在窗口上可用，使它们可用于CONFIG 构建。

Object.defineProperty(window, 'HybridInject_en', {value: HybridInject_en});
Object.defineProperty(window, 'INJECT_en', {value: INJECT_en});

结果

运行测试时，我得到以下输出

[BABEL] Note: The code generator has deoptimised the styling of "jest/configs/inject.en.ts" as it exceeds the max of "500KB".



<--- Last few GCs --->



[208:0x37d62f0]    86678 ms: Scavenge 1384.7 (1422.5) -> 1383.8 (1423.0) MB, 11.5 / 0.1 ms  (average mu = 0.143, current mu = 0.101) allocation failure 

[208:0x37d62f0]    86694 ms: Scavenge 1384.7 (1423.0) -> 1383.9 (1423.5) MB, 13.5 / 0.1 ms  (average mu = 0.143, current mu = 0.101) allocation failure 

[208:0x37d62f0]    86710 ms: Scavenge 1384.9 (1423.5) -> 1384.2 (1424.0) MB, 13.5 / 0.1 ms  (average mu = 0.143, current mu = 0.101) allocation failure 





<--- JS stacktrace --->



==== JS stack trace =========================================



    0: ExitFrame [pc: 0x255fdc5dbe1d]

Security context: 0x0e1a9b79e6e1 <JSObject>

    1: SourceMapConsumer_allGeneratedPositionsFor [0x32dd014cb6a1] [/var/jenkins_home/workspace/base_jenkins-build/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x255fdcb3491a](this=0x0319d2aa8031 <BasicSourceMapConsumer map = 0x68f75371d81>,aArgs=0x1954c0c022a9 <Object map = 0x68f75372671>)

    2: /* anonymous */(aka /* anonymous */...



FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

 1: 0x8daaa0 node::Abort() [node]

 2: 0x8daaec  [node]

 3: 0xad73ce v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]

 4: 0xad7604 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]

 5: 0xec4c32  [node]

 6: 0xec4d38 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]

 7: 0xed0e12 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]

 8: 0xed1744 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]

 9: 0xed43b1 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]

10: 0xe9d834 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]

11: 0x113cf9e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]

12: 0x255fdc5dbe1d 

Aborted

npm ERR! Test failed.  See above for more details.

【问题讨论】：

标签： javascript angular jestjs angular-test

【解决方案1】：

在package.json 的脚本部分中，您应该增加堆（下面的示例，但您需要适应您的用途，我从未使用过 jest）

"gulp": "node --max_old_space_size=2560 ./node_modules/gulp/bin/gulp",
"run-build": "npm run gulp",
"run-build-with-switches": "npm run gulp -- myspecialtarget"

第一行设置了一个脚本，当您使用npm run gulp 引用它时，该脚本运行 gulp 并增加堆。第二行将运行不带参数的第一个脚本（对于 gulp，这意味着默认目标）。第三行将使用参数myspecialtarget 运行 gulp。

【讨论】：

【解决方案2】：

经过一段时间的努力，我设法解决了这个问题，方法是将package.json 文件中所有依赖项中的所有 ^ 替换为 ~。

替换

  "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.0",
    "@angular/common": "^7.2.0",
    "@angular/compiler": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/forms": "^7.2.0",
    ...

  },

收件人

  "dependencies": {
     "@agm/core": "~1.0.0-beta.5",
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    ...

  },

我认为这个问题是因为不同版本的库之间的冲突。

【讨论】：