如何优化Angular 9应用和反应式表单的性能?

问题描述 投票:0回答:1

我在一个组织里做一个大型企业的Angular SPA,问题是在反应式表单的输入栏里,当输入时,表单控制栏的弹出速度很慢,需要5-6秒才能弹出UI,即使在prod环境下也是如此。问题是,在反应式表单的输入字段中,当输入时,表单控制字段的填充速度非常慢,在UI上需要5-6秒才能填充,即使在prod环境下也是如此。

关于使用的反应式表单,通常每个页面有一个表单组,没有嵌套的表单组,而且一个表单组中的表单控件不多,最多10-12个。一个页面上有子组件,但通常一个页面上有1-2个组件。

我把表单控件上的值变化分离出来,当输入值发生变化时,只调用特定的表单控件的值变化。

  • 使用updateOn: 'blur'

  • 在输入字段上使用了 debounce(400) 和 distinctUntilChanged() NgRx 函数,这样就不会每次输入都调用 valueChanges。

  • 取消了ngOnDestroy块中的每个订阅。

  • 尝试将ChangetectionStrategy改为Onpush,但子组件没有被加载,所以我没有实现这个技术。

  • 删除了页面上不必要的导入,这样应用程序就不会变得沉重。

  • 单个form-control的valueChanges分开。

  • ngOnint块中的代码尽量少。

我目前正在尝试的最终解决方案是LazyLoading组件。而且我也在某个地方看到,你必须在单独的服务或类中写你的表单组可以提高性能。

有没有其他的解决方案,或者插件,或者我做错了什么,或者有其他人面临类似的情况,他们是如何克服的。或者说,在Angular中的大型SPA也是如此吗?由于政策原因,不能在这里粘贴源码。

angular performance angular-reactive-forms angular-forms angular9
1个回答
0
投票

你有很多数据加载到这个控件中?或者,也许你只是提供像21岁这样的文本?

© www.soinside.com 2019 - 2024. All rights reserved.