Angular-cli: "ng build -prod" is still extremely slow ！

Created on 27 Apr 2020  ·  10Comments  ·  Source: angular/angular-cli

🐞 Bug report

Command (mark with an x)


  • [ ] new
  • [x] build
  • [ ] serve
  • [ ] test
  • [ ] e2e
  • [ ] generate
  • [ ] add
  • [ ] update
  • [ ] lint
  • [ ] xi18n
  • [ ] run
  • [ ] config
  • [ ] help
  • [ ] version
  • [ ] doc

Description

ng build --prod in a large project is extremely slow !
I found many issue to this problem,but in the end, they didn't solve it properly(search by keyword '92%'、'80%'、‘slow’)
It takes 11min at 7.x, 15min at 8.x, now it's too slow to be tolerated. I even wonder if angular can be used for large projects.

🔬 Minimal Reproduction

Large projects has this problems

🔥 Exception or Error

1、80% chunk modules optimization ModuleConcatenationPlugin
2、92% chunk asset optimization
At this two points it takes so much time!

I have two project created by @nrwl/nx.
One has 256 files, it's build very fast with 3-5min.
The other project has 2,598 files, it's build so slowly.
Two projects share a lib (1000files)
ng build without ivy and all config closed by false(aot、buildOptimizer...) need so many memory that jenkins server always crash.




> node --max-old-space-size=16384 ./node_modules/@angular/cli/bin/ng b platform --progress=true --showCircularDependencies=true --prod=true --sourceMap=false --statsJson=true --verbose=true >>log.txt

Warning: Entry point 'ngx-echarts/core' contains deep imports into 'node_modules/echarts/lib/echarts'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
 [webpack.Progress] 139177ms building
 [webpack.Progress] 663ms finish module graph
 [webpack.Progress] 17ms sealing
 [webpack.Progress] 254ms dependencies optimization
 [webpack.Progress] 135ms chunk graph
 [webpack.Progress] 616ms module optimization
 [webpack.Progress] 40ms advanced chunk optimization
 [webpack.Progress] 742198ms chunk modules optimization
 [webpack.Progress] 48ms module order optimization
 [webpack.Progress] 104ms before module ids
 [webpack.Progress] 17ms module ids
 [webpack.Progress] 34ms module id optimization
 [webpack.Progress] 19ms chunk id optimization
 [webpack.Progress] 32ms after chunk id optimization
 [webpack.Progress] 18ms record modules
 [webpack.Progress] 27104ms hashing
 [webpack.Progress] 13876ms chunk assets processing
 [webpack.Progress] 36ms additional chunk assets processing
 [webpack.Progress] 2260ms additional asset processing
 [webpack.Progress] 398697ms chunk asset optimization
 [webpack.Progress] 14ms after chunk asset optimization
 [webpack.Progress] 23ms after asset optimization
 [webpack.Progress] 48ms after seal
 [webpack.Progress] 144895ms emitting
Hash: 26f644aa4d62175a2b2d
Version: webpack 4.42.0
Time: 3118021ms
Built at: 2020-04-28 00:26:31

🌍 Your Environment




Angular CLI: 9.1.1
Node: 12.14.0
OS: win32 x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

                    "production": {
                            "fileReplacements": [
                                {
                                    "replace": "environments/environment.ts",
                                    "with": "environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "aot": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "baseHref": "./",
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "4mb",
                                    "maximumError": "10mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb"
                                }
                            ]
                        },

"dependencies": {
        "@angular/animations": "^9.1.2",
        "@angular/cdk": "^9.2.1",
        "@angular/common": "^9.1.2",
        "@angular/core": "^9.1.2",
        "@angular/forms": "^9.1.2",
        "@angular/platform-browser": "^9.1.2",
        "@angular/platform-browser-dynamic": "^9.1.2",
        "@angular/router": "^9.1.2",
        "@ngrx/effects": "^9.1.0",
        "@ngrx/router-store": "^9.1.0",
        "@ngrx/store": "^9.1.0",
        "@nrwl/nx": "7.8.7",
        "aot-loader": "^1.0.1",
        "core-js": "^3.6.5",
        "date-fns": "^2.12.0",
        "echarts": "^4.1.0",
        "html2canvas": "^1.0.0-rc.0",
        "moment": "^2.24.0",
        "ngrx-store-freeze": "0.2.4",
        "ngx-bootstrap": "^5.6.1",
        "ngx-drag-drop": "^2.0.0",
        "ngx-echarts": "^4.1.0",
        "ngx-img-cropper": "^9.0.1",
        "ngx-sortablejs": "^3.1.3",
        "qrcode": "^1.3.2",
        "rxjs": "^6.5.5",
        "rxjs-compat": "^6.5.5",
        "sortablejs": "^1.9.0",
        "tslib": "^1.10.0",
        "wangeditor": "^3.1.1",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.1",
        "@angular/cli": "^9.1.1",
        "@angular/compiler": "^9.1.2",
        "@angular/compiler-cli": "^9.1.2",
        "@angular/language-service": "^9.1.2",
        "@angularclass/hmr": "^2.1.3",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@ngrx/store-devtools": "^9.1.0",
        "@nrwl/schematics": "8.12.11",
        "@nrwl/workspace": "^9.2.2",
        "@types/echarts": "^4.4.6",
        "@types/jasmine": "~3.5.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-marbles": "0.6.0",
        "jasmine-spec-reporter": "~5.0.1",
        "karma": "^5.0.1",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.1",
        "karma-jasmine": "~3.1.1",
        "karma-jasmine-html-reporter": "^1.5.3",
        "prettier": "2.0.4",
        "protractor": "~5.4.0",
        "ts-node": "~8.8.2",
        "tslint": "~6.1.1",
        "typescript": "^3.8.3",
        "webpack-bundle-analyzer": "^3.7.0"
    }
devkibuild-angular browser repro steps memorperformance triage #1 bufix
Source
picture miniai

Most helpful comment

I think this issue will be closed with no solution....

picture miniai on 5 May 2020
👍4

All 10 comments

Hi @miniai,

Can you please share a the project or a reproduction even privately? Unfortunately, without a reproduction we'll be unable to determine the root cause of the problem.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Thanks.

alan-agius4 picture alan-agius4 on 29 Apr 2020

This problem will only appear in large projects，more than 3000files.
Have you tried using angular in large projects?

miniai picture miniai on 1 May 2020

I found this issues, it's same with me,and you can search with keyword '92%'、'80%'、‘slow’,you can find this problem is always here.
https://github.com/angular/angular-cli/issues/17469

miniai picture miniai on 1 May 2020

I think this issue will be closed with no solution....

miniai picture miniai on 5 May 2020
👍4

I tried to pack the async modules separately
there 9 modules build time：
module1 78714ms
module2 86224ms
module3 112828ms
module4 134244ms
module5 171097ms
module6 218403ms
module7 143209ms
module8 161373ms
module9 113815ms
but why together it‘’s so slow.

miniai picture miniai on 11 May 2020

one pack：
module2
module3
module7
module8
module9
456564ms

two pack：
module3
module4
module5
640571ms

It looks like adding up the time for each module to be packaged separately

miniai picture miniai on 12 May 2020

As @alan-agius4 said, there's not much we can do here without a reproduction of some kind. If you're able to share the project (even privately, for a short time) we can take a look. Larger projects tend to have slower build times as there more work for the build pipeline to do, but there are plenty of large applications which use Angular and have manageable build times.

dgp1130 picture dgp1130 on 29 May 2020

Sorry，It‘s company's projects that cannot be made public and share

miniai picture miniai on 30 May 2020

@miniai, unfortunately without a reproduction even privately shared we’re unable to investigate this issue further.

alan-agius4 picture alan-agius4 on 30 May 2020

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 30 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericel picture ericel  ·  3Comments
IngvarKofoed picture IngvarKofoed  ·  3Comments
brtnshrdr picture brtnshrdr  ·  3Comments
gotschmarcel picture gotschmarcel  ·  3Comments
rwillmer picture rwillmer  ·  3Comments