angular - 使用 AOT 构建 Angular 5 非常缓慢且耗费内存

Question

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

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

Our goal was to make AOT compilation fast enough so that developers could use it for development, eliminating the differences that developers sometimes run into when trying to go to production for the first time. The team has hit its 2 second incremental AOT rebuild performance targets, and will be turning AOT on by default in a future release of the CLI.

这是我的新 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 内存并且非常慢
• 第一次增量重建失败，因为 fatal error :CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足

这是 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 和构建优化器默认在产品构建中。

ng build --prod --named-chunks 添加 --named-chunks。

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