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

Question

我刚刚按照Angular 4升级指南更新了我的AngularJS 1.6应用程序.基本上我已经添加了新的angular 4依赖项package.json,通过appstrapped app 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 for dev 3) - Tree-shaking 4) - 条件poly-fills（现代浏览器不需要任何poly-fills，但对于旧浏览器来说它们是必需的）

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

这是关于 NG2 性能的一个很好的清单。我希望它能帮助你。