6 个 Angular 性能调优技巧

已发表: 2023-02-03

Angular 是一个用于构建 Web 应用程序的强大 JavaScript 框架，但随着应用程序的增长，它可能会变得缓慢且难以管理。 Angular 性能调优是确保 Angular 应用程序平稳高效运行的重要部分。

在本文中，我们将探讨一些优化 Angular 应用程序性能的提示和技巧，包括缩短加载时间、减小应用程序大小以及减少不必要的 DOM 更新次数的技术。无论您是经验丰富的 Angular 开发人员还是刚刚起步，这些提示和技巧都将帮助您提高应用程序的性能并确保它为您的用户顺利运行。

因此，让我们从简单的 Angular 应用程序性能调整的主要技术开始。

Angular 性能调优技巧

您可以通过各种技巧轻松提高 Angular 应用程序的性能。但是，我们为您挑选了六个最佳角度应用程序优化技巧。他们来了：

使用 AoT 编译
使用 OnPush 变化检测策略
使用纯管道
在 ngFor 上使用 TrackBy
代码拆分
改善页面加载

让我们详细了解它们中的每一个。

使用 AoT 编译

提高 Angular 应用程序性能的一个重要技巧是使用提前 (AoT) 编译。 AoT 是一种在构建时预编译 Angular 组件和模板的技术，而不是在运行时编译它们。这可以显着缩短应用程序的加载时间，因为浏览器不需要在应用程序首次加载时花时间编译模板和组件。

AoT 还通过在 JavaScript 代码中内联模板和组件工厂来帮助减小应用程序的大小。这减少了加载应用程序所需的网络请求数，并减小了应用程序的整体大小，这有助于缩短加载时间。

要在 Angular 应用程序中启用 AoT 编译，您需要使用 Angular CLI 通过“–aot”标志构建您的应用程序。这将为您的应用程序启用 AoT 编译，并且生成的构建将针对性能进行优化。此外，您可以直接使用“ngc”编译器等工具，这是 Angular CLI 用于 AoT 编译的命令行工具。

使用 OnPush 变化检测策略

OnPush 更改检测策略是一种提高 Angular 应用程序性能的方法，它仅在输入属性更改或发出事件时检查组件中的更改。这与默认的“OnPush”策略相反，该策略在每次有变化检测周期时检查组件及其所有子组件中的变化。

要使用 OnPush 策略，您需要导入 ChangeDetectorRef 模块并将组件的 @Component 装饰器的 changeDetection 属性设置为 ChangeDetectionStrategy.OnPush。

OnPush 是一种强大的策略，可以提高您的应用程序的性能，但它也会使应用程序变得更加复杂。请务必在实施此策略后彻底测试您的应用程序，以确保它按预期工作。

使用纯管道

Angular 中的纯管道是一种仅在输入值或传递给管道的参数发生变化时才运行的管道。这可以提高 Angular 应用程序的性能，因为它减少了管道运行的次数。

要在 Angular 中创建纯管道，您需要将 pure: true 属性添加到管道的 @Pipe 装饰器中。

需要注意的是，当你创建一个纯管道时，只有当输入值或传递给管道的参数发生变化时，Angular 才会重新运行管道。如果管道依赖于未作为输入传递的其他数据或状态，则管道可能不会产生正确的输出。

还值得注意的是，如果您在使用 OnPush 更改检测策略的组件内有一个纯管道，它只会在发出 Input 或事件时执行管道，这可以进一步提高应用程序的性能。

请记住，如果您使用具有复杂功能的纯管道，它可能会对应用程序的性能产生负面影响，因为在输入值更改之前管道不会执行。在这种情况下，最好使用不纯的管道。

在 ngFor 上使用 TrackBy

trackBy 是 Angular 中的一项功能，它允许您为 ngFor 循环中的每个项目指定唯一标识符。这可以通过减少集合更改时需要创建和销毁的 DOM 元素的数量来提高 Angular 应用程序的性能。

要在 ngFor 循环中使用 trackBy，您需要传递一个函数作为 trackBy 属性的值。该函数应接收当前项目的索引和项目本身，并返回该项目的唯一标识符。

<div *ngFor=”let item of items; trackBy：trackByFn”>{{ item.name }}</div>

trackByFn(index: number, item: any) {

返回 item.id;

}

在此示例中，trackByFn 函数返回每个项目的唯一标识符作为其 id 属性。

代码拆分

代码拆分是一种用于通过减少应用程序的初始加载时间来提高 Angular 应用程序性能的技术。它涉及将应用程序的代码分解成更小、更易于管理的块，这些块可以在用户浏览应用程序时按需加载。

这允许应用程序只加载当前页面所需的代码，而不是一次加载所有代码，这可以显着缩短应用程序的初始加载时间。这个技术可以使用 Angular Router 模块和 loadChildren 属性来实现。

改善页面加载

有几种方法可以改善 Angular 应用程序的页面加载，其中一些包括：

代码拆分：如前所述，代码拆分是一种涉及将应用程序代码分解为可按需加载的更小块的技术。这可以显着改善应用程序的初始加载时间。
延迟加载：延迟加载是一种涉及仅在需要时才加载模块的技术。这还可以通过减少初始加载时需要加载的代码量来帮助缩短应用程序的初始加载时间。
优化图像：通过压缩图像和使用适当的图像格式来优化图像还可以通过减少需要下载的图像的大小来帮助改善页面加载。
使用浏览器缓存：启用浏览器缓存还可以通过允许浏览器在本地存储资源来帮助提高页面加载，这样就不必再次下载它们。

最后的话

总之，Angular 是一个功能强大且用途广泛的框架，可用于构建复杂的高性能 Web 应用程序。然而，与任何框架一样，有一些最佳实践和技术可用于优化 Angular 应用程序的性能。通过使用代码拆分、延迟加载等技术，开发人员可以显着改善 Angular 应用程序的加载时间和整体性能。

Smarsh Infotech 是一家受欢迎的 IT 服务外包公司，可以成为您未来的应用程序开发合作伙伴。如果您计划在数字平台上发展业务，我们可以竭尽所能为您提供帮助。让我们交流并讨论您的项目想法。

另请阅读： The New Angular 14：阅读所有相关内容