Upgrading AngularJS app to an hybrid Angular-1.6 / Angular-4 kills the perf

Question

I've just updated my AngularJS 1.6 app by following the Angular 4 upgrade guide. Basically I've added new angular 4 dependencies in package.json, bootstrapped the app via UpgradeModule and created a new simple component in angular 4. Everything works as expected but the performance is really bad!

The application is a dashboard application with potentially lots of widget components and lots of http requests to the backend to fill each widget content.

Depending on the dashboard, the upgraded app is 2x to 5x slower to load and display the dashboard, and chrome network console shows the http requests are run in a sequence instead of being shot all at once like in the 1.6 version. Overall, the UI is also a lot less fluid.

I've played with ngZone and tried to run requests outside of angular zone.runOutsideAngular(() => { ... }) to reduce refresh cost due to change detection. The result is slightly faster but still far slower than the original 1.6 only version.

Is there something to consider when upgrading to an hybrid 1.6-4 app to keep great original performance? Thanks!

Answer 1

We are using hybrid application. According to our measures NG2 adds about 20% to the initial NG1 time. It not so bad, but we did a lot of staff after just configuring hybrid: 1) - Bundles instead of multiply requests for NG2 (thanks CLI) 2) - AOT for prod; JIT for dev 3) - Tree-shaking 4) - Conditional poly-fills (modern browsers don't require any poly-fills, but they are necessary for old browsers)

We are trying to integrate the following staff as well: 1) - Lazy loading. But I am not sure if it is working for hybrid applications 2) - Web Worker to move NG2 to a separate thread. But again I am still not sure if it is working for hybrid applications 3) - Some custom detect changes strategies

Here is a good checklist regarding NG2 performance. I hope it will help you.

Answer 2

I have hybrid app Ng1.5+Ng2.4.0. I also had performance problems with angular4 in hybrid mode by 2 reasons.

1. This relates to DEBUG only since ng4 performs extra checks. In production mode (call enableProdMode() before bootstrap to turn it on) angular4 even a bit faster than ng2.

   import { enableProdMode } from '@angular/core';

   enableProdMode ();

2. Ng4 in hybrid mode schedules digest if any watch expression function in angularjs made async call. I.e. if you use lodash throttle function in angularjs watch expression to reduce digest rate then having Ng4 can lead to opposite effect -- digests will queue as snowball.