2

I m using angular-cli, now at version 1.0.0.-beta.17, as scaffolding for an Angular2 app that is the "head" of a "headless cms". (These terms means that the CMS is only a data store, it doesn't render pages. Rendering is done in the Angular client).

The CMS content is fetched using the methods outlined in How to pass parameters rendered from backend to angular2 bootstrap method. (I tried both APP_INITIALIZER and the AppModule.constructor() variants).

My problem is that the site is too slow on initial load: 2 seconds to page rendered on a fast client. Site is built using ng build -prod, which produces a decently small bundle (styles+scripts+main=550kB).

Here is a graph of a typical load on a pretty fast client computer:

enter image description here

The big issue here is the 1.2 seconds that pass from when Angular is completely loaded to when the APP_INITIALIZER methods actually run. On mobiles and slower devices it is worse :-(

The majority of the tips on how to optimize Angular are for version 1.

Anyone have tips on what I can do to to shorten the init times?

Community
  • 1
  • 1
Jesper We
  • 5,977
  • 2
  • 26
  • 40
  • AOT is what allows drastically reducing the initialization time. But it's still new, and might require changes to your code (private properties used from the views must be public, for example). – JB Nizet Oct 28 '16 at 18:01
  • So I read in https://github.com/angular/angular-cli/issues/1732 that AOT is available since beta.16, and I'm on beta.17 so it should maybe work... But it doesn't, throws compile error `Unexpected value 'CustomFormsModule' imported by the module 'AppModule'`. This is the `ng2-validation` package. – Jesper We Oct 28 '16 at 19:47
  • @JesperWe I'm using angular2 with systemjs and using lazy loaded routes. I find the app takes 4 seconds to bootstrap on desktop and 12 seconds on android/mobile and 5 seconds on iPhone. Do you know any good seed apps I could move my app to, for loading speed improvements? I need to get my app loading much faster. – AngularM Jan 30 '17 at 10:36
  • 1
    @AngularM as you can see no one has answered this post, despite there being many gurus here. The bad news is that Angular2 is just too big and too slow. I have abandoned it. The App I wrote this post for renders in 3 seconds on desktop and 24(!) seconds on Android. The similar App build with React renders in 600ms on desktop and 4 seconds on Android..... – Jesper We Jan 31 '17 at 08:46
  • @JesperWe Do you have any good resource on how I could move my angular2 app to react? I'm worried that it will take too long to migrate across to it? – AngularM Feb 01 '17 at 14:00
  • @AngularM Yes unfortunately it is like a 85% rewrite. You keep all the business logic though, so it is faster than writing it the first time :-) – Jesper We Feb 02 '17 at 11:42
  • @JesperWe do you know if the angular2 team are aware of this slow bootstrapping? And if they're looking to do a release for it to be faster? – AngularM Feb 02 '17 at 14:12

0 Answers0