@ngtools/webpack / ngc - 4x slower aot compilation from ng6 to ng7

[sod]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Performance issue

Current behavior

webpack incremental build with angular 7 takes ~30 seconds
in angular 6 it was ~10 seconds

package.json (angular 7.0.0, webpack 4.12)

{
    "@angular/animations": "^7.0.0",
    "@angular/cli": "^7.0.2",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/platform-server": "^7.0.0",
    "@angular/router": "^7.0.0",
    "@ngtools/webpack": "^7.0.2",
    "@types/bootstrap": "4.1.2",
    "@types/jest": "^23.3.5",
    "@types/jquery": "^3.3.21",
    "@types/js-yaml": "^3.11.2",
    "@types/lodash": "4.14.117",
    "@types/node": "10.12.0",
    "@types/reflect-metadata": "0.1.0",
    "@types/webpack": "^4.4.17",
    "@types/webpack-env": "^1.13.6",
    "autoprefixer": "9.2.1",
    "bootstrap-sass": "3.3.7",
    "circular-dependency-plugin": "^5.0.2",
    "core-js": "2.5.7",
    "css-loader": "1.0.0",
    "file-loader": "^2.0.0",
    "ismobilejs": "0.4.1",
    "jquery": "3.3.1",
    "loader-utils": "1.1.0",
    "lodash": "4.17.11",
    "mini-css-extract-plugin": "^0.4.4",
    "moment": "2.22.2",
    "node-sass": "4.9.4",
    "postcss-loader": "3.0.0",
    "postcss-raw": "0.1.2",
    "postcss-scopify": "0.1.9",
    "postcss-url": "^8.0.0",
    "raven-js": "^3.27.0",
    "rimraf": "2.6.2",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sass-loader": "7.1.0",
    "sync-p": "1.1.5",
    "ts-node": "^7.0.1",
    "tslib": "^1.9.3",
    "typescript": "^3.1.3",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-merge": "^4.1.4",
    "webpack-sources": "^1.3.0",
    "webpack-uglify-parallel": "0.1.4",
    "zone.js": "^0.8.26"
}

It seems like typescript needs a lot of time for something:

CPU-20181023T113903.cpuprofile.zip

AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync: 25729.967ms
AngularCompilerPlugin._emit.ng.getNgStructuralDiagnostics: 0.010ms
AngularCompilerPlugin._emit.ng.emit: 1930.130ms
AngularCompilerPlugin._emit: 1930.281ms
AngularCompilerPlugin._update._emit: 1930.317ms
AngularCompilerPlugin._update: 27720.982ms
AngularCompilerPlugin._make: 27721.017ms

I observe the same behavior when running ngc directly instead of webpack.
If i use tsc to compile the project, that watch/rebuild takes ~1second.

Expected behavior

faster incremental build

Minimal reproduction of the problem with instructions

Can't share the repo, but if this ticket isn't sufficient, maybe I can strip down the project.

Environment

Angular version: 7.0.0

For Tooling issues:

• Node version: v8.12.0
• Platform: macOS 10.13.6

[sod]

This is the cpu profile with our previous angular release (angular 6.0.4)

CPU-20181023T134145.cpuprofile.zip

It runs through in 7s, so it's even a 4x slowdown in angular7.

The computation inside typescript seems not to happen in the angular 6 version:

AngularCompilerPlugin._createOrUpdateProgram.ng.createProgram: 1.301ms
AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync: 2357.365ms
AngularCompilerPlugin._emit.ng.getNgStructuralDiagnostics: 0.024ms
AngularCompilerPlugin._emit.ng.emit: 1906.843ms
AngularCompilerPlugin._emit: 1907.039ms
AngularCompilerPlugin._update._emit: 1907.097ms
AngularCompilerPlugin._update: 4315.328ms
AngularCompilerPlugin._make: 4320.589ms

[trotyl]

Duplicate of angular/angular-cli#12646

[sod]

Indeed, the compiler is also included in my aot build.

But that thread only focusses on the bigger build, not that the incremental aot watcher now takes 4x as long to recompile.

And I observed the same 4x slowdown behavior with using ngc directly. That excludes all webpack issues, optimizations, configuration and whatnot from the chain. Just pure node_modules/.bin/ngc --project tsconfig.json --watch

[filipesilva]

I think the root cause for this issue is microsoft/TypeScript#28025, and there is a fix being worked on there in microsoft/TypeScript#28028. Thanks @thekiba the heads up!

[IgorMinar]

The latest typescript patch release contains a fix for this compile time regression. Can you please test it and file a new issue if you are still having problems? Thanks.

[achmedzhanov]

Hi!

I have tested "webpack --watch" with TypeScript 3.1.6, incremental compilation has become faster in several times

[achmedzhanov]

But now code changes do not fall into the updated bundle in watch mode :`(

[sod]

can confirm, with angular 7.0.3 and typescript 3.1.6 the regression is gone. The watcher is as "fast" as before.

[sod]

angular 7.1.1 is 3x slower again. I guess at this point we stick with 7.0.4 and wait for ivy.

[filipesilva]

@sod was this just updating Angular or also updating ngtools/webpack? If you updated them together, can you try updating individually please? Just to see which of the two causes the regression.

[sod]

hm indeed, just updating ngtools gives me the slowdown. Also using angular 7.1 with old ngtools 7.0.7 is significantly faster.

versions	1st run	2nd run	3rd run	4th run	5th run
@angular 7.0.4, @ngtools 7.0.7	31s	15s	7s	5s	5s
@angular 7.0.4, @ngtools 7.1.0	29s	14.5s	15.5s	12s	12s
@angular 7.1.1, @ngtools 7.1.0	29s	13.5s	13.5s	15s	16s
@angular 7.1.1, @ngtools 7.0.7	28s	12.8s	7s	5s	4.2s

[filipesilva]

@sod thanks for compiling these numbers, I've opened angular/angular-cli#13102 for this.

[angular-automatic-lock-bot]

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.}