How to improve Angular 2's template parsing performance? - performance

Question

We're doing a rewrite of our UI using Angular 2. Since this is so new, there are very few resources available, so please excuse me, if my question seems silly and has been answered already.
First, a little background. Our product is built out of "modules" which are widgets that can be dropped on a page. Since, not all modules are being rewritten to use Angular 2, there will be a mix of non Angular and Angular modules on one page at the same time. For this reason, we've decided to make each Angular2 module to be a stand-alone angular app.
In the prototype phase all looked fine and dandy, however, fast forward a few months, and with just weeks before the release, someone looked at our page load times and was less than impressed. On my machine, with prodMode enabled, it takes 5 modules about 2.5 seconds to render with 2 of our most complicated modules taking a second each. The two biggest templates I've got are 32KB and 80KB in size, but since the processing time is the same, I suspect the linear length doesn't contribute as much as structural complexity, and they are pretty complex. The other 3 modules are much simpler.
From this timeline it seems that a lot of time is spent in parsing the template and loading components. So I thought maybe this is because each module is an independent angular app, and they probably don't share the cached components. So I've moved the BROWSER_APP_COMPILER_PROVIDERS from the App Providers into Platform Providers list. This caused all modules to reuse a single RuntimeCompiler (I think).
However in the grand scale of things, it did not improve the situation much. The total time went down to 2.3 seconds which makes it hardly worth the hassle.
Now, the modules are mostly wizards. That is they sit and look pretty until the user taps/clicks on the them to engage. So this got me thinking, what if I could stage the template parsing? If I could tell Angular to parse wizard steps on demand I could lower load time in exchange for some lag when interacting the the module. This is what I'm researching now, but I would love to hear the community's input.
Thank you for reading.
UPDATE: I am running RC.3.

Answer 1

In angular 2.4 we have a concept known as AOT, which can improve the performance!
An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.
You can compile the app in the browser, at runtime, as the application loads, using the just-in-time (JIT) compiler. This is the standard development approach shown throughout the documentation. It's great but it has shortcomings.
JIT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won't actually need. Bigger apps take longer to transmit and are slower to load.
Compilation can uncover many component-template binding errors. JIT compilation discovers them at runtime, which is late in the process.
The ahead-of-time (AOT) compiler can catch template errors early and improve performance by compiling at build time.

Answer 2

Offline (pre)compiler could help, but it is not ready yet.
You could try replacing copy pasted/duplicated html code with separate component to reduce template size. Tree-like UI structure with reusable components might help.
Another way is to use lazy loading: load wizard when user clicks them (might use preloading).
I think it would be helpful to submit CPU profile to angular team, so that they could optimize compiler/parser.

Answer 3

Ok, Thanks for writing to me. So, if I am understanding this correct, every widget acts like different angular 2 app. Therefore, base module or base angular
app is dependent on multiple dependent injectable apps. Now, I am assuming this fact, that you have already taken bundling and minification of production ready
script. Apart from that, Just wanted to understand what is the SLA of API serving the request. Many a time, I observe that people complain UI for slowness. But,
it used to be the backend not meeting the SLAs. Check if your backend SLA is fine.
Next, what is your caching strategy of angular modules. How frequently, these are making request back to the server. Here is a catch. Around caching, all components
are not released in a battle ready status. Another thing, which I wanted to understand is, whether you are using RXJS for handling promises or not. RXJS, drammatically
improves the performance of angular 2 app.
Next, is reusablity of the code, say wrapping the reusable code in directive and then injecting the same at all the required places. This will cut the code compilation
cost.
Also, keep checking angular 2 milestones and the new fixes getting released around performance improvement. I am expecting final battle ready production framework
for angular 2 by December. Then, we will also migrate our apps to angular 2. Even, in nasdaq, we are currently running on 1.5X version. I hope this will help you
to improve the performance of your app.