【问题标题】:Building Angular 5 with AOT is very slow and memory consuming使用 AOT 构建 Angular 5 非常缓慢且消耗内存
【发布时间】:2018-02-01 12:18:43
【问题描述】:

我刚刚从 Angular 4 迁移到 Angular 5,希望每次重新构建应用程序时都能节省一些宝贵的时间。

来自https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

我们的目标是使 AOT 编译速度足够快,以便开发人员可以将其用于开发,从而消除开发人员在首次尝试投入生产时有时会遇到的差异。该团队已达到其 2 秒增量 AOT 重建性能目标,并将在未来的 CLI 版本中默认启用 AOT。

这是我的新 package.json:

"dependencies": {
    "@angular/animations": "^5.0.5",
    "@angular/common": "^5.0.5",
    "@angular/core": "^5.0.5",
    "@angular/compiler": "^5.0.5",
    "@angular/compiler-cli": "^5.0.5",
    "@angular/forms": "^5.0.5",
    "@angular/http": "^5.0.5",
    "@angular/platform-browser": "^5.0.5",
    "@angular/platform-browser-dynamic": "^5.0.5",
    "@angular/platform-server": "^5.0.5",
    "@angular/router": "^5.0.5",
    "@auth0/angular-jwt": "^1.0.0-beta.9",
    "@types/googlemaps": "^3.26.11",
    "@types/lodash": "^4.14.77",
    "@types/quill": "^1.3.3",
    "angular2-moment": "^1.0.0",
    "bootstrap": "^3.3.6",
    "datatables.net": "^1.10.16",
    "datatables.net-scroller": "^1.4.1",
    "es6-shim": "^0.35.2",
    "lodash": "^4.17.4",
    "moment": "^2.17.1",
    "ng2-dragula": "^1.5.0",
    "primeng": "^5.0.2",
    "quill": "1.2.4",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "systemjs": "^0.20.12",
    "ts-helpers": "^1.1.1",
    "typescript": "2.4.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.5",
    "@types/datatables.net": "^1.10.6",
    "@types/jasmine": "2.5.47",
    "@types/jquery": "^2.0.45",
    "@types/node": "^7.0.18",
    "codelyzer": "~4.0.1",
    "jasmine-core": "2.6.1",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.2",
    "ts-node": "3.0.4",
    "tslint": "^5.2.0",
    "typescript": "2.4.2"
  }

迁移完成后,我在构建/重建应用时遇到了严重的性能问题。 按照建议,我现在使用ng serve --aot 来测试我的代码。

问题是:

  • 第一次构建需要 > 2Go 的 RAM,而且非常慢
  • 由于FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory,第一次增量重建失败

这是 AOT 构建的结果:

Hash: 042c05f2f5f6996535b7
Time: 536793ms
chunk {account.module} account.module.chunk.js () 29.7 kB
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 15.6 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 952 kB [initial]
chunk {projet.module} projet.module.chunk.js () 38.3 kB
chunk {rapport.module} rapport.module.chunk.js () 991 kB
chunk {styles} styles.bundle.js (styles) 3.14 MB [initial]
chunk {vendor} vendor.bundle.js (vendor) 13 MB [initial]

webpack: Compiled successfully.

我错过了什么吗?真的可以在开发中使用 AOT 构建吗?

【问题讨论】:

  • 我在类似情况下使用过的一件事是通过命令“node --max-old-space-size=4096 ng serve --aot”运行(注意“ng”部分可能需要指定特定路径 - 在 Windows 上运行时已经看到)
  • 实际上,我在使用 Angular 4 时已经遇到了这个问题,并使用您的解决方案解决了它。但是对于 Angular 5,成本要重要得多,而且我没有无限的 RAM。
  • 事实是我离这2s还远着去增量重建AOT。到目前为止,我的计算机无法处理它并出现故障。
  • 我迁移到 Node 8.9.x,没有任何改变。我编辑了我的问题以在我的控制台中添加构建结果。最后一次构建持续了 536 秒!
  • 这让人很伤心。老实说,没有人愿意花时间寻找优化调用的方法,以确保系统构建得更快!我希望有更好的方法......也许系统中有更多的内存。

标签: angular angular5


【解决方案1】:

对于缓慢的构建,您可以使用此版本的 angular cli:

"@angular/cli": "1.7.0-beta.0",

这将我的构建时间从 30 分钟缩短到 3 分钟。

在 Angular 5 中,AOT 和构建优化器默认在 prod 构建中。

ng build --prod --named-chunks adding --named-chunks

你的构建命令会给你命名的块,这样你就可以更好地分析你的块,并更好地增强你在每个模块中导入的内容。一个示例,您可能正在将整个共享模块导入某个模块,而您只使用该共享模块中的一个东西

【讨论】:

  • 我想你的意思可能是 3 分钟到 30 秒 :-)
  • @fergal_dd 不,我的意思是我说的我有一个非常大的应用程序,过去需要长达 45 分钟
  • 感谢纳迪尔的回答。我将尝试新版本的 CLI。你花了 30 分钟来构建我并不感到惊讶。我的应用目前正在 7 分钟内构建。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-01-10
  • 2019-01-22
  • 2018-06-24
  • 2011-01-10
  • 1970-01-01
  • 1970-01-01
  • 2019-04-01
相关资源
最近更新 更多