Question

我刚刚从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来测试我的代码。

问题是：

第一次构建需要＆gt; 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构建？

Answer 1

如果构建速度很慢，可以使用此版本的angular cli：

“@ angular / cli”：“1.7.0-beta.0”，

这将我的建造时间从30分钟减少到3分钟。

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

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

到您的构建命令将为您提供命名块，以便您可以更好地分析块，并更好地增强您在每个模块中导入的内容。您可能正在将整个共享模块导入某个模块的示例，而您只需使用该共享模块中的一项内容

使用AOT构建Angular 5非常慢且占用内存

1 个答案: