AoT uses a lot more resources in browser than JiT

[RoxKilly]

I'm submitting a ... (check one with "x")

[x] bug report (maybe)

Current behavior
When I use the Ahead-of-Time compiler -- ngc -- along with rollup.js to build my app, it consumes a lot more CPU cycles in the browser than Just-in-Time. The resulting bundle is also significantly larger.

Expected behavior
AoT with tree-shaking to result in a smaller, less resource-hungry application. I was so shocked by my observation that I've re-run the tests below over a dozen times now.

Minimal reproduction of the problem with instructions

1. I started the browser (Firefox 49 32bit on Windows 7 x64),
2. let it sit idle for a couple of minutes,
3. loaded the app in the only open tab
4. let the app sit idle for a minute, recording CPU/IO activity using Windows' Performance Monitor

The AoT build is more resource hungry. In addition, its JS bundle (which has been minified and tree-shaken with rollup) is about 500KB larger than its JiT compiled counterpart.

AoT compiled bundle + vendor.js (made up of core-js, reflect-metadata and zone.js):

AoT CPU and IO operations starting 5 seconds before I load the app, extending for 1 minute:

The app was optimized following the directions from the docs. I've also tried bundling the AoT build with SystemJS-builder, and avoid Rollup.js altogether, but the performance differential remained.

Now checkout the same exact app using in-browser, Just-in-Time compilation. The templates and styles have been inlined and all the JS bundled into one minified file using SystemJS-builder's buildStatic

JiT compiled bundle is about 500KB lighter than the AoT tree-shaken minified bundle, even though the former includes core-js, reflect-metadata and zone.js!

JiT CPU and IO operations starting 5 seconds before I load the app, extending for 1 minute:

Can anyone replicate this? If not, how can I find out why it's happening to my app?

What is the motivation / use case for changing the behavior?
I'd like to use AoT builds, and although they load faster, their latent power consumption makes them a non-starter.

Please tell us about your environment:
Firefox 49 32bit, Angular 2.0.1, ng2 compiler-cli 0.6.3, node 4.5.0, Windows 7 x64

[DzmitryShylovich]

You can reduce the size of the bundle:

1. lazy loading.
2. gziping.

How large is your app? What 3rd party libs do u use? Can u post a link to a github repo?

[RoxKilly]

@DzmitryShylovich Thanks. I don't think I could make the app public. If you tell me how you would measure app size I'd be happy to provide a metric.

  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/compiler-cli": "~0.6.3",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/platform-server": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/material": "2.0.0-alpha.9-3",

    "chart.js": "^2.2.2",
    "core-js": "^2.4.1",
    "crypto-js": "^3.1.6",
    "hammerjs": "^2.0.8",
    "intl": "1.2.5",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
  }

[DzmitryShylovich]

Have a look at https://github.com/qdouble/angular-webpack2-starter
It has the same dependencies as you + ngrx and after aot build the final bundle size is 209kb (minified and gziped).

Discussion: qdouble/angular-webpack-starter#111
For the smallest possible bundle see https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/

[ericmartinezr]

side note : with AoT you don't need reflect-metadata nor core-js implementation of it

[RoxKilly]

@ericmartinezr interesting; why is that?
@DzmitryShylovich thanks for the tip

[manklu]

In addition, its JS bundle (which has been minified and tree-shaken with rollup) is about 500KB larger than its JiT compiled counterpart.

The AOT bundle contains all the code generated by the JIT. So I would expect that the AOT build is larger than the JIT, if the Application is large enough.

But without your application, it's hard to tell if I would expect 500KB in your case.

[robwormald]

Using Windows CPU profiler is a pretty poor metric for anything related to JS, as you're measuring what the browser itself is doing, not what code running within it is doing.

I'd suggest doing some tracing with Chrome's developer tools - https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution - this would give us all a much better picture of what's actually occurring in your application. You can export and share the trace from devtools, and link it here.

[thelgevold]

Did you take a peek into the bundle to make sure it only contains expected modules?
I have often found it useful to inspect the bundle using source-map-explorer to ensure the bundle only contains the intended bits.

There is a section in the AoT article about this.

[RoxKilly]

@thelgevold the AoT and JiT packages are the exact same app, just built differently.

@robwormald Thanks for the tip. Hopefully the info below will help guide the discussion.

I've been running more tests. The issue (AoT app requiring much more CPU work than JiT) occurs both on Firefox 49 and Chrome 54.

How I collected the data:

• fresh install of both browsers, with default settings and no add-ons or plugins
• restart the browser between tests, and load only one tab, which contains the app
• let browser sit idle for at least 30 seconds
• record performance for 20 seconds with Chrome CPU profiler and with Firefox performance profiler

The screenshots below are from Firefox, while the browser is sitting idle.

JiT app: waterfall chart:

AoT app: waterfall chart: requestAnimationFrame from ZoneTask is called infinitely but not sequentially (timelines overlap)

JiT app: call tree:

AoT app: call tree: there are a lot more function calls than can be seen here

JiT app: flame chart excerpt; 50 to 200ms interval

AoT app: flame chart excerpt; 50 to 200ms interval

I'm attaching a zip file with four files:

• jit_perf_chrome JiT cpu profile recorded by Chrome
• aot_perf_chrome matching AoT profile
• jit_perf_firefox JiT performance profile recorded by Firefox
• aot_perf_firefox matching AoT profile

performance_profiles.zip

To inspect the data, you can import these files into dev tools from the Profile tool in Chrome, or the Performance tool in Firefox.

Interestingly, as soon as I minimize the browser window, CPU usage goes back down to JiT-compiled levels. Once I return focus to the window, usage goes up again.

[RoxKilly]

This has to do with Angular Material MdSpinner component. For some reason, AoT compilation consumes tons of CPU when my template includes this component (even after it is removed from the DOM), but JiT compilation does not.

[RoxKilly]

Closing: See this issue

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