将 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 并尝试在角度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) - 一些自定义检测变化策略

Here 是一个很好的关于 NG2 性能的清单。希望对你有帮助。

Answer 2

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

1. 这仅与调试有关，因为 ng4 执行额外的检查。在生产模式下（在引导之前调用 enableProdMode() 将其打开）angular4 甚至比 ng2 快一点。

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

   enableProdMode ();

2. 如果 angularjs 中的任何监视表达式函数进行异步调用，则混合模式下的 Ng4 会调度摘要。 IE。如果你在 angularjs watch 表达式中使用 lodash throttle 函数来降低消化率，那么使用 Ng4 会导致相反的效果——消化会像滚雪球一样排队。