hugoj-goncalves commented 3 years ago

🐞 Bug report

Command (mark with an `x`)

[ ] new
[ ] build
[X] serve
[ ] test
[ ] e2e
[ ] generate
[ ] add
[ ] update
[ ] lint
[ ] extract-i18n
[ ] run
[ ] config
[ ] help
[ ] version
[ ] doc

Is this a regression?

Haven't tried on earlier versions.

Description

Compile time on view engine is just way faster than with IVY enabled o.O ## 🔬 Minimal Reproduction

just a simple ng serve

build time goes from ~40sec to ~60sec on view engine to ~100sec to ~130sec on IVY

incremental build time also goes up with quite a margin

the only changes I made was in tsconfig.json to set "enableIvy": false and angular.json to set aot: false when building view engine I used the NG_BUILD_PROFILING env var to get some data, but I'm not really sure how to "read" it

🌍 Your Environment




$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.5
Node: 12.21.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cli                    11.2.5
@schematics/angular             11.2.5
@schematics/update              0.1102.5
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.0.7

Anything else relevant?

It's a private project with some private libs, so I can't really share the code ;/ it has a good amount of dependencies

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "startProd": "ng serve --prod --source-map",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.6",
    "@angular/common": "~11.2.6",
    "@angular/compiler": "~11.2.6",
    "@angular/core": "~11.2.6",
    "@angular/forms": "~11.2.6",
    "@angular/platform-browser": "~11.2.6",
    "@angular/platform-browser-dynamic": "~11.2.6",
    "@angular/router": "~11.2.6",
    "@angular/service-worker": "~11.2.6",
    "@circlon/angular-tree-component": "~11.0.4",
    "@eklesia/core": "11.0.0-dev.h12",
    "@eklesia/cpf-cnpj-validator": "0.1.1-eklesia.2",
    "@eklesia/gestao": "11.0.0-dev.h14",
    "@eklesia/ngx-datatable": "18.0.0-eklesia.1",
    "@eklesia/ngx-img-cropper": "10.0.0-eklesia.1",
    "@fortawesome/fontawesome-free": "5.15.3",
    "@microsoft/signalr": "5.0.1",
    "@ng-select/ng-select": "6.1.0",
    "@ngx-loading-bar/core": "5.1.1",
    "@ngx-loading-bar/http-client": "5.1.1",
    "@ngx-loading-bar/router": "^5.1.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-archwizard": "7.0.0",
    "angular2-text-mask": "9.0.0",
    "angular2-toaster": "11.0.1",
    "angularx-qrcode": "^11.0.0",
    "bootstrap": "4.6.0",
    "classlist.js": "1.1.20150312",
    "core-js": "3.9.1",
    "date-fns": "^2.19.0",
    "easy-pie-chart": "2.1.7",
    "eks-numero-por-extenso": "1.0.8-eklesia.1",
    "flot": "github:themicon/flot",
    "fullcalendar": "^3.10.2",
    "hashids": "2.2.8",
    "ika.jvectormap": "github:themicon/ika.jvectormap",
    "image-compressor.js": "1.1.4",
    "intl": "1.2.5",
    "jquery": "3.5.1",
    "jquery-sparkline": "2.4.0",
    "jquery.browser": "0.1.0",
    "jquery.flot.spline": "github:themicon/jquery.flot.spline",
    "jquery.flot.tooltip": "github:krzysu/flot.tooltip",
    "jsbarcode": "3.11.3",
    "line-awesome": "1.3.0",
    "loaders.css": "0.1.2",
    "lodash-es": "^4.17.21",
    "modernizr": "3.11.6",
    "moment": "2.29.1",
    "ng2-file-upload": "1.4.0",
    "ngx-bootstrap": "6.2.0",
    "ngx-color-picker": "11.0.0",
    "ngx-permissions": "8.1.1",
    "popper.js": "1.16.1",
    "rxjs": "6.6.6",
    "screenfull": "5.1.0",
    "simple-line-icons": "2.5.5",
    "source-sans-pro": "3.6.0",
    "summernote": "0.8.18",
    "sweetalert2": "10.15.6",
    "text-mask-addons": "3.8.0",
    "ts-helpers": "1.1.2",
    "tslib": "^2.1.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.5",
    "@angular-devkit/core": "^11.2.5",
    "@angular/cli": "~11.2.5",
    "@angular/compiler-cli": "~11.2.6",
    "@angular/language-service": "~11.2.6",
    "@eklesia/expose-web-api-urls": "1.0.30",
    "@eklesia/severino": "2.0.7",
    "@types/googlemaps": "3.43.3",
    "@types/jasmine": "~3.6.7",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^14.14.35",
    "codelyzer": "^6.0.1",
    "gzipper": "4.4.0",
    "jasmine-core": "~3.7.0",
    "jasmine-spec-reporter": "~6.0.0",
    "karma": "~6.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-read-json": "1.1.0",
    "ng-packagr": "^11.2.4",
    "npm-run-all": "^4.1.5",
    "phantomjs-prebuilt": "2.1.16",
    "protractor": "~7.0.0",
    "source-map-explorer": "2.5.2",
    "ts-node": "9.1.1",
    "tslint": "~6.1.3",
    "typescript": "~4.0.7",
    "wait-on": "^5.3.0",
    "webdriver-manager": "12.1.8"
  },
  "engines": {
    "node": ">= 12"
  }
}

speed-measure-plugin-view-engine.json chrome-profiler-events-view-engine.json

speed-measure-plugin-ivy.json chrome-profiler-events-ivy.json

clydin commented 3 years ago

Setting “AOT” to false means that the view engine compiler isn’t being used at build time; only the typescript compiler.

Can you provide timings with AOT enabled for both VE and Ivy?

hugoj-goncalves commented 3 years ago

Setting “AOT” to false means that the view engine compiler isn’t being used at build time; only the typescript compiler.

Can you provide timings with AOT enabled for both VE and Ivy?

oh... didn't know about that with aot enabled looks like I have similar results to IVY, ~120secs compile incremental build looks worse tough: like 30sec with IVY and 90secs on view engine

setting aot: false with IVY enabled tough doesn't help much, build time still looks almost the double

is it common sense that ivy:false and aot:false is faster at build time or I have some problem within my project?

alan-agius4 commented 3 years ago

is it common sense that ivy:false and aot:false is faster at build time or I have some problem within my project?

Considering the large number of dependencies I suspect that is the overhead of NGCC. I’ll try to take a look at the profiler events next week.

clydin commented 3 years ago

Looks like Ivy AOT initial builds are ~10% faster than ViewEngine AOT initial builds which is good.

For non-AOT (JIT mode), the difference may also be partly due to the deprecated string-form analysis for lazy routing. This analysis step has been completely removed in the upcoming v12 (currently in prerelease) as support for the string-form as been removed. However, there may be some opportunities to improve the performance in v11.

If you have some time, as an experiment, could you try with the v12 prerelease? ng update @angular/cli @angular/core --next

hugoj-goncalves commented 3 years ago

Wow... that's some amazing results with:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 12.0.0-next.5
Node: 12.21.0
OS: win32 x64

Angular: 12.0.0-next.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: No

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0-next.5
@angular-devkit/build-angular   0.1200.0-next.5
@angular-devkit/core            12.0.0-next.5
@angular-devkit/schematics      12.0.0-next.5
@schematics/angular             12.0.0-next.5
@schematics/update              0.1200.0-next.5
ng-packagr                      12.0.0-next.5
rxjs                            6.6.6
typescript                      4.2.3

is there any ETA for v12 ;s? is it production ready?

alan-agius4 commented 3 years ago

The target date for version 12 release May 2012. While you can use version 12 for production it's still not deemed as stable.

@clydin, has a PR in flight to reduce resource processing during JIT https://github.com/angular/angular-cli/pull/20339

clydin commented 3 years ago

@hugoj-goncalves If you have some additional time, can you check JIT mode with the latest version of the CLI (11.2.6)? Running ng update @angular/cli @angular/core should update the project to the latest stable versions.

hugoj-goncalves commented 3 years ago

@hugoj-goncalves If you have some additional time, can you check JIT mode with the latest version of the CLI (11.2.6)? Running ng update @angular/cli @angular/core should update the project to the latest stable versions.


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.6
Node: 12.21.0
OS: win32 x64

Angular: 11.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: No

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.6
@angular-devkit/build-angular   0.1102.6
@angular-devkit/core            11.2.6
@angular-devkit/schematics      11.2.6
@angular/cli                    11.2.6
@schematics/angular             11.2.6
@schematics/update              0.1102.6
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.0.7

Edit: This is simply wrong, this batch of tests I ran using ng serve -c=localLibs (So I basically built the project referencing our internal libs locally instead of the ones published into the node_modules)

hugoj-goncalves commented 3 years ago

@clydin Whopsi... previous results were simply not using the same "command" ;/ My bad... I'll just put 11.2.5 and 11.2.6 together to be easier to compare

11.2.5 11.2.6

so it actually did help a little bit I guess... v12 is just insane tough ;s

clydin commented 3 years ago

The 12.0 version has been released and is now stable. If any performance issues are encountered after upgrading, please let the team know by opening a new issue with updated version information.

angular-automatic-lock-bot[bot] commented 3 years ago

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 / angular-cli

Ivy JIT initial compile time is just crazy slow on our project #20338

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Description

🌍 Your Environment

angular / angular-cli

Ivy JIT initial compile time is just crazy slow on our project #20338

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🌍 Your Environment

Command (mark with an `x`)