将AngularJS应用程序升级到混合的Angular-1.6 / Angular-4会降低性能

Question

我刚刚通过Angular 4 upgrade guide更新了我的AngularJS 1.6应用。基本上，我已经在package.json中添加了新的angular 4依赖项，通过UpgradeModule引导了应用程序，并在angular 4中创建了一个新的简单组件。一切工作正常，但性能真的很差！

这个应用程序是一个仪表板应用程序，它可能包含大量的小部件组件和对后端的大量http请求，以填充每个小部件的内容。

根据仪表板的不同，升级后的应用程序加载和显示仪表板的速度要慢2到5倍，chrome网络控制台显示http请求是按顺序运行的，而不是像1.6版本那样一次拍摄所有请求。总体而言，用户界面也不那么流畅。

我尝试过使用ngZone，并尝试在angular zone.runOutsideAngular(() => { ... })之外运行请求，以减少由于变化检测而带来的刷新成本。结果是稍微快了一点，但仍然比最初的1.6版本慢得多。

在升级到混合1.6-4应用程序以保持良好的原始性能时，有什么需要考虑的吗？谢谢!

Answer 1

我们正在使用混合应用程序。根据我们的测量，NG2在初始NG1时间上增加了大约20%。这并不是那么糟糕，但在配置了混合之后，我们做了很多工作: 1) -捆绑包而不是NG2的多个请求(感谢CLI) 2) -生产的AOT；开发的JIT 3) -树摇动4) -条件多填充(现代浏览器不需要任何多填充，但它们是旧浏览器所必需的)

我们也在尝试整合以下人员: 1) -懒惰加载。但我不确定它是否适用于混合应用程序2) - Web Worker将NG2移动到单独的线程。但我仍然不确定它是否适用于混合应用程序3) -一些自定义的检测更改策略

关于NG2性能，Here是一个很好的检查表。我希望它能对你有所帮助。

Answer 2

我有一个混合应用程序Ng1.5+Ng2.4.0。由于两个原因，我在混合模式下使用angular4时也遇到了性能问题。

1. 这只与调试有关，因为ng4会执行额外的检查。在生产模式下(在启动之前调用enableProdMode()打开它)，angular4甚至比ng2还要快一点。

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

如果angularjs中的任何监视表达式函数进行异步调用，混合模式下的enableProdMode ();

• Ng4会调度摘要。也就是说，如果您在angularjs watch表达式中使用lodash throttle函数来降低摘要速率，那么使用Ng4可能会导致相反的效果-摘要将像雪球一样排队。