Skip to content

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

New issue
New issue
Closed
Closed
@ngtools/webpack / ngc - 4x slower aot compilation from ng6 to ng7#26674
Labels
area: coreIssues related to the framework runtime
Milestone
needsTriage

Description

@sod
sod
opened on Oct 23, 2018

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

image

image

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

Activity

  1. sod commented on Oct 23, 2018

    @sod
    sod
    on Oct 23, 2018
    ContributorAuthor

    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:

    image

    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

  2. trotyl commented on Oct 23, 2018

    @trotyl
    trotyl
    on Oct 23, 2018
    Contributor

    Duplicate of angular/angular-cli#12646

  3. sod commented on Oct 23, 2018

    @sod
    sod
    on Oct 23, 2018
    ContributorAuthor

    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

  4. sod
    changed the title [-]@ngtools/webpack 3x slower from ng6 to ng7[/-] [+]@ngtools/webpack / ngc - 4x slower aot compilation from ng6 to ng7[/+] on Oct 23, 2018
  5. filipesilva
    self-assigned this
    on Oct 24, 2018
  6. filipesilva
    added
    type: bug/fix
    regressionIndicates than the issue relates to something that worked in a previous version
    on Oct 24, 2018
  7. filipesilva
    removed their assignment
    on Oct 24, 2018
  8. filipesilva
    removed
    regressionIndicates than the issue relates to something that worked in a previous version
    type: bug/fix
    on Oct 24, 2018

  9. filipesilva commented on Oct 25, 2018

    @filipesilva
    filipesilva
    on Oct 25, 2018
    Contributor

    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!

  10. matsko
    added
    area: coreIssues related to the framework runtime
    on Oct 30, 2018
  11. ngbot
    added this to the needsTriage milestone on Oct 30, 2018

  12. IgorMinar commented on Nov 4, 2018

    @IgorMinar
    IgorMinar
    on Nov 4, 2018
    Contributor

    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.

  13. IgorMinar
    closed this as completedon Nov 4, 2018

  14. achmedzhanov commented on Nov 6, 2018

    @achmedzhanov
    achmedzhanov
    on Nov 6, 2018

    Hi!

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

    cpu-ngtools

  15. achmedzhanov commented on Nov 6, 2018

    @achmedzhanov
    achmedzhanov
    on Nov 6, 2018

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

  16. sod commented on Nov 8, 2018

    @sod
    sod
    on Nov 8, 2018
    ContributorAuthor

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

  17. sod commented on Nov 30, 2018

    @sod
    sod
    on Nov 30, 2018
    ContributorAuthor

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

  18. filipesilva commented on Nov 30, 2018

    @filipesilva
    filipesilva
    on Nov 30, 2018
    Contributor

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

  19. sod commented on Nov 30, 2018

    @sod
    sod
    on Nov 30, 2018
    ContributorAuthor

    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

  20. filipesilva commented on Nov 30, 2018

    @filipesilva
    filipesilva
    on Nov 30, 2018
    Contributor

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

  21. angular-automatic-lock-bot commented on Sep 14, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botBot
    on Sep 14, 2019

    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.

  22. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtime

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions