首页 文章

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

提问于
浏览 次
5

我刚刚按照Angular 4 upgrade guide更新了我的AngularJS 1.6应用程序 . 基本上我在 package.json 中添加了新的角度4依赖项，通过 UpgradeModule 引导应用程序并在角度4中创建了一个新的简单组件 . 一切都按预期工作但性能非常糟糕！

该应用程序是一个仪表板应用程序，可能有大量的小部件组件和大量的后端http请求来填充每个小部件内容 .

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

我玩了 ngZone 并尝试在angular zone.runOutsideAngular(() => { ... }) 之外运行请求，以降低因更改检测而导致的刷新成本 . 结果稍微快一点，但仍比原来的1.6版本慢得多 .

升级到混合1.6-4应用程序以保持良好的原始性能时是否需要考虑一些事项？谢谢！

angularjs angular angular2-upgrade angular-upgrade

2 回答

  • 2

    我们正在使用混合应用 . 根据我们的测量，NG2在最初的NG1时间增加了大约20％ . 它并没有那么糟糕，但是我们在配置混合之后做了很多工作：1） - 捆绑而不是对NG2的多次请求（感谢CLI）2） - AOT for prod; JIT for dev 3） - Tree-shaking 4） - 有条件的poly-fill（现代浏览器不需要任何poly-fill，但它们是旧浏览器所必需的）

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

    Here是关于NG2性能的良好清单 . 我希望它会对你有所帮助 .

    回复于
  • 3

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

    • 这与DEBUG有关，因为ng4执行额外的检查 . 在 生产环境 模式（在bootstrap之前调用 enableProdMode() 将其打开）angular4甚至比ng2快一点 .

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

    enableProdMode ();

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

    • Ng4会调度摘要 . 即如果你在angularjs监视表达式中使用lodash throttle 函数来降低摘要率，那么使用Ng4会导致相反的效果 - 摘要将排队为雪球 .
    回复于

相关问题