Angular 2 AOT vs JIT payload comparison

Question

I'm pretty new to Angular 2, so correct me if I'm inaccurate.

My understanding of Angular 1 vs 2 when it comes to compiler:

In Angular 1 the compiler is more general and dynamic, meaning that dirty checking code is a single code running over different components. However for performance sake in Angular 2, every component will get compiled to a generated code that handles bindings and dirty checking for that specific component. It means that depending on the component template, more specifically number of bindings, the generated code becomes larger.

When we use JIT, this is not important as this code doesn't go through the network and is generated in browser. But when using AOT it's going to be transferred from the server.

The problem (possibly):

When the application is small, AOT will definitely result in smaller payload as the compiler is not going to be shipped to browser. But as the application grows, I assume this difference starts to decrease and maybe become inverted (does it?!). But I don't have a quantitative sense of it. Is it going to be a real issue for medium or large scale applications?

Indeliberate

Another consideration is that AoT payload can be compressed better (don't have AoT build at hand to check this). – Theodora

Answer 1

To answer the question "But as the application grows, I assume this difference starts to decrease and maybe become inverted (does it?!)" :

Yes it does, on a very large app the difference can be seen.

I asked a similar question on the webpack starter github, to quote the answer :

You might notice that the main file and chunk files are larger in build:prod:aot then in build:prod, this is perfectly normal since AOT produces more code. The total amount is less in AOT since the compiler is not part of the bundle, you can see it in the size of the vendor bundle. This also means that as your application grow, AOT will yield larger code since you add more AOT generated code but the compiler size is constant. The angular team is working on reducing the emitted code, one of the upcoming feature for this is a new View Engine that will reduce bundle size but will slightly effect performance (it's always a tradeoff)

Still, the apps starts way faster with AOT than JIT. Please see the issue, it seems the angular2 team is aware of this and plan on reducing this behavior.

https://github.com/AngularClass/angular2-webpack-starter/issues/1520

The issue to track on angular2 team side : https://github.com/angular/angular/issues/14013

UPDATE : Now live with Angular 4 https://github.com/angular/angular/blob/master/CHANGELOG.md#view-engine

We’ve made changes under to hood to what AOT generated code looks like. These changes should reduce the size of the generated code for your components by more than half in some cases. Read the Design Doc for the View Engine updates.

Betthezel

Answer 2

The solution is to actually manage correctly AOT, with LazyLoading.

To really give an answer, there will be problems, but now we have the tools to manage them. Lazy Loading is a solution that we could not apply to AngularJS easily.

Check out this link, that is really well made and covers the whole subject about modules, contexts, and compilation : http://blog.angular-university.io/angular2-ngmodule/

You can also combine both and get the best of it : http://blog.assaf.co/angular-2-harmony-aot-compilation-with-lazy-jit-2/

Bystreet

It doesn't make sense to have AOT and JIT together , the whole point is the cut the compiler , which your saying to not. – Correction

It does : blog.assaf.co/angular-2-harmony-aot-compilation-with-lazy-jit-2 – Bystreet

Lazy load the Compiler ! I miss the Jquery so much :) What are we doing ? Angular was meant to make things easier , now we have to find ways to hack it to work. – Correction