AngularJS application update for Angular -1.6 / Angular -4 hybrid kills perf

Question

I just updated the AngularJS 1.6 application by following the Angular 4 upgrade guide . Basically, I added new angular 4 dependencies in package.json, downloaded the application through UpgradeModuleand created a new simple component in angular 4. Everything works as expected, but the performance is very poor!

The application is a dashboard application with a potentially large number of widget components and many HTTP requests to the server to populate each widget content.

Depending on the control panel, the updated application is 2-5 times slower to load and display the dashboard, and the chrome network console shows that HTTP requests are launched in sequence and not removed simultaneously, as in version 1.6. In general, the user interface is also much less fluid.

I played with ngZoneand tried to run queries outside of angular zone.runOutsideAngular(() => { ... })to reduce the cost of updating due to change detection. The result is a bit faster, but still much slower than the original version 1.6.

Is there anything that needs to be considered when upgrading to a 1.6-4 hybrid application in order to maintain excellent original performance? Thank!

Answer 1

. , NG2 20% NG1. , , : 1) - NG2 ( CLI) 2) - AOT ; JIT 3) - 4) - ( - , )

: 1) - . , 2) - Web Worker NG2 . , 3) -

NG2. , .

Answer 2

Ng1.5 + Ng2.4.0. 4 .

• DEBUG , ng4 . ( enableProdMode() , ) 4 , ng2.

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

  enableProdMode ();

• Ng4 , - angularjs . lodash throttle angularjs, , Ng4 - .