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

[hugoj-goncalves]

🐞 Bug report

Command (mark with an x)

• new
• build
• 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]

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]

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]

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]

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]

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]

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 #20339