Angular 5编译速度很慢,有时会耗尽内存

时间:2017-11-12 01:11:46

标签: angular typescript npm angular5

我们有一个中等角度的Angular应用程序。 FWIW,Angular4 build生成的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"
        ]
    }
}

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

尝试使用--max-old-space-size = {{MB中的内存}}

来增加node.js的内存大小。

我的构建脚本如下

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