【发布时间】: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 秒!
-
这让人很伤心。老实说,没有人愿意花时间寻找优化调用的方法,以确保系统构建得更快!我希望有更好的方法......也许系统中有更多的内存。