Angular 5 编译速度非常慢，有时内存不足

Question

我们有一个中型 Angular 应用程序。 FWIW，Angular4 构建生成的 app.js 大小为 4MB。我们确实不使用 Angular-CLI。当我们刚开始时，它不可用；然后看起来我们不需要它。构建时间 (npm start) 大约需要 2 分钟。

现在我们升级到 Angular 5。同样的构建需要 一个多小时，并且在某些机器上报告 Out of memory。我在任务管理器中注意到npm 分配的内存在崩溃之前确实上升了大约 2GB。不确定是 2GB 的命令行会话限制，还是物理内存不足（你只能进行这么多小时的实验 :)

无论如何，有没有办法查看导致 npm 缓慢的原因？

平台：Windows 10，npm 5.5.1

更新：配置文件：

package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "description": "my awesome application",
  "scripts": {
    "start": "webpack-dev-server --inline --debug --progress --port 10071",
    "test": "karma start",
    "build": "rimraf dist && webpack -p --config ./config/webpack.prod.js --progress --profile --bail"
  },
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/platform-server": "^5.0.1",
    "@angular/router": "^5.0.1",
    "@ng-idle/core": "^2.0.0-beta.12",
    "@ng-idle/keepalive": "^2.0.0-beta.12",
    "@types/html2canvas": "^0.5.35",
    "@types/jspdf": "^1.1.31",
    "angular-svg-round-progressbar": "^1.2.0",
    "angular2-moment": "^1.7.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^0.5.0-beta4",
    "jquery": "^3.2.1",
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2",
    "material-design-icons": "^3.0.1",
    "mime-types": "^2.1.17",
    "moment": "^2.19.1",
    "ngx-perfect-scrollbar": "^5.0.0",
    "primeng": "^5.0.0-rc.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.0.1",
    "@types/jasmine": "^2.6.2",
    "@types/node": "^8.0.47",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.3.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jasmine-core": "^2.8.0",
    "karma": "^1.7.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.5",
    "node-sass": "^4.6.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.16",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "typescript": "^2.6.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "noStrictGenericChecks": true,
        "lib": [ "es2015", "dom" ],
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "html2canvas",
            "jasmine",
            "node",
            "jspdf"
        ]
    }
}

Answer 1

罪魁祸首是 Typescript 的版本。一旦我降级到 2.5.1，它就加速了！ Angular 4 和 5 上的行为相同。

Answer 2

尝试增加 node.js 内存大小，使用 --max-old-space-size={{ memory in MB }}

我的构建脚本如下所示

"build": "node --max-old-space-size=3072 ./node_modules/@angular/cli/bin/ng build --aot --prod --build-optimizer && cp .htaccess dist/.htaccess",