2023 年 Angular 性能优化终极指南

介绍

每个用户都希望他们的应用程序能够更快地加载并流畅地运行，从而提供无缝的体验。但是，很可能在应用程序优化时出现。为此，Angular 是最佳选择，因为它是一种高性能的前端框架。

它提供了许多增强应用程序性能的工具和技术。那么，让我们了解如何提高 Angular 应用程序的性能。该博客涵盖了 Angular 的提示和技巧以及Angular 性能优化的最佳工具，可帮助您加快 Angular 应用程序的性能。

Angular 性能优化技术

遵循最佳实践和 Angular 优化技术，您可以消除典型的瓶颈并加速您的应用程序。

AOT（提前）编译器的使用

Angular 提供两种类型的编译器：及时编译器和提前编译器。直到 Angular 8，Angular 默认的编译模式是及时（JIT）。但是，自 Angular 9 发布以来，默认的编译方式是 Ahead of Time（AOT）。

它涉及在开发期间进行编译，并且无需部署包。此外，它还有助于减小应用程序的大小、提供时间来呈现各个组件并提高应用程序性能。

此外，在应用过程中，他们的模板绑定错误会被识别并快速失败，因此开发过程变得更快。

要使用 AOT，开发人员可以使用 Angular CLI 命令。

ng构建-Aot

Tree Shaking 以减少 Bundle 的大小

在 Angular 中，Tree Shaking 用于减小 JavaScript 包的大小。Tree shaking 从应用程序中删除未使用的代码，并将其转移到更小、更高效的包中。

底层构建系统在构建过程中像 Angular CLI 一样执行它。此外，构建系统分析代码并检测应用程序未调用的未使用代码、函数或类。

因此，通过删除未使用的代码，JavaScript 的小尺寸有助于更快地加载并提高整体性能。但是，如果您使用的是 Angular CLI，则可以将其设置为默认值。

要在 Angular 应用程序中启用 tree shaking，您可以在 Angular CLI 中使用以下命令：

ng build --prod --optimization=true --build-optimizer=true

延迟加载模块

延迟加载是 Angular 用于提高性能的默认功能。它是一种具有众多功能模块的 Angular 技术，有助于缩短初始加载时间。当用户导航到特定的应用程序部分时，只有必要的模块才会被延迟加载。

它有助于同时仅加载一些应用程序并减少加载时间。此外，模块被创建为路由并将应用程序拆分为更小的块，每个块包含一个特定的功能或部分。

通过在 Angular 应用程序中实现延迟加载，您可以使应用程序响应更快、参与度更高。此外，它还减少了需要通过网络传输的数据量和服务器负载。

使用 loadChildren 属性执行模块的延迟加载。

变更检测优化

更改检测可以检测用户数据何时更改或更新。它是 Angular 框架的主要特性之一，对于维护 Angular 应用程序的一致性至关重要。

更改检测是指将更改应用于应用程序的数据模型，以便可以相应地修改视图。变更检测需要克服三种策略：OnPush检测策略、不可变数据结构、纯pips。

使用 OnPush 变化检测策略

OnPush 是 Angular 中的一种变更检测策略，被称为“checkAlways”策略。Angular 使用默认的变更检测策略在每个事件（例如时间、HTTP 请求和用户输入）之后检查组件的数据模型变更。

变更检测策略的好处之一是它减少了变更检测周期的数量，提高了性能并减少了内存使用。此外，此策略指示 Angular 仅在组件的输入属性更改时检查更改。

它有助于了解应用程序并确保他们使用延迟加载等最佳实践以获得最佳性能。更改策略可以识别用户的数据，然后更新 DOM 以请求更改。

要使用更改检测策略，您可以使用以下 OnPush 属性：

ChangeDetectionStrategy.OnPush

不可变数据和使用纯管道

不可变数据结构对于优化 Angular 应用程序中的变更检测很有价值。它是指创建后不能更改的数据。通过使用不变性数据，开发人员可以确保应用程序的数据模型在必要时得到更新，并有助于提高整体性能。

Pips 分为两类：不纯和纯 Pipes。使用 Pure Pipes 在数据显示给用户之前转换数据。关于变化检测性能，并非所有管道都是平等创建的。通过使用纯管道，您可以减少不必要的更改周期数。

随着时间的推移，不纯的 Pipe 会为相同的输入产生大量的输出。要定义纯管道，您可以使用以下内容：

@管道（{
  名称：'myPurePipe'，
  纯：真})

要定义非纯管道，您可以使用以下属性：

@管道（{
  名称：'myImpurePipe'})

避免模板中的昂贵操作

避免昂贵的操作至关重要，因为它会影响应用程序的性能。此外，为避免在模板中进行操作，您应该使模板尽可能简单以提高性能。

此外，这意味着您正在避免模板中的复杂逻辑和计算，并将它们转移到组件服务中。开发人员可以使用这种技术来优化模板的性能。

此外，捕获昂贵的操作可以帮助多次减少相同的重新计算结果并提高效率。

正确使用 ngZone

ngZone 服务是 Angular 用于管理变更检测过程的强大工具。但是，过多使用 ngZone 会影响应用程序的性能。因此，相应地使用它来限制意外后果至关重要。

在 Angular 区域之外使用 ngZone 将有利于提高其性能。这可以通过使用第三方库（如 RxJS）提供的与区域无关的 API 来实现。此外，它还可以帮助开发人员避免更改检测周期并清理不必要的任务。

此外，此功能有助于在正确的时间自动更正更改检测。它不会让第三方 API 损害应用程序的性能。

最小化 HTTP 请求的数量

Angular 发出的每个 HTTP 请求都包括 TCP 连接建立、DNS 解析和 TLS 协商。这将显着提高 Angular 的性能。此外，最小化 HTTP 请求的最佳实践之一是使用缓存。

通过缓存早期请求的响应，您可以避免冗余请求并减少 HTTP 请求的数量。此外，将多个 HTTP 请求合并为一个请求可以增强 Angular 中的性能优化。

提高 Angular 性能的技巧

知道策略就足以增强。尽管如此，最重要的是实施以下技巧来提高 Angular 应用程序的性能：

🟠 减少图像和其他资产的大小

图片和其他资产的大小可能会很大，从而导致加载时间增加和 Angular 性能下降。减小图像和资产的大小可优化应用程序性能并提高工作效率。

您可以通过压缩图像并使用 Compressor.io 或 TinyPNG 等工具利用微小的 CSS 和 JavaScript 文件来减少它。此外，您必须考虑 Angular 性能优化技术，例如渐进加载和延迟加载。

🟠 使用缓存改善加载时间

另一个强大的 Angular 性能优化技术是使用捕获来增加加载时间。通过缓存数据，您可以减少对服务器发出的 HTTP 请求的数量并缩短应用程序加载时间。

此外，您可以使用 Angular HTTPClient 和 Service Workers 等工具来实现多个级别，例如服务器缓存、浏览器缓存和客户端缓存。通过更短的加载时间，您的应用程序可以运行得更快并且显着。

🟠 尽量减少第三方库的数量

库太多会影响 Angular 应用程序的性能调优。每个库都会为应用程序增加价值，但有时会对性能产生负面影响。此外，每个库都会增加文件大小并减慢其加载时间。

因此，避免使用执行相似或相同功能的多个库是理想的。此外，您不必依赖一组库来执行特定的可靠任务和开销任务。

🟠 避免不必要的代码重复

在 Angular 中，代码重复会导致代码效率低下，并对应用程序性能产生负面影响。代码重复会增加应用程序的文件大小并产生功能问题。对于 Angular 应用程序性能优化，您应该避免不必要的代码重复，并且必须编写可维护和可重用的干净、高效的代码。

此外，对于Angular 的性能最佳实践，使用 Angular 的内置依赖注入机制在服务和组件之间共享功能。

🟠 代码剖析和分析

要识别 Angular 应用程序中的性能瓶颈，必须使用代码概要分析和分析。您可以通过分析代码和识别效率低下的区域来改进特定任务。

此外，一些用于改进应用程序的分析和分析工具包括 Angular Angury 和 Chrome Dev Tools。您可以使用这些工具优化代码并改进 Angular 应用程序的性能和用户体验。

测量角度性能的工具

除了策略和技巧之外，以下工具还可以帮助您衡量 Angular 性能并带来最佳结果。

1. Chrome 开发者工具

它是 Google Chrome 浏览器的一组工具和功能，可提供 Angular 应用程序的分析和调试。它包括内存和 CPU 分析功能以及网络分析，以检查和分析 Angular 性能。

此外，您可以使用时间线视图来可视化 Angular 性能改进并实时识别潜在的瓶颈。此外，该工具还允许您检查应用程序的网络活动并呈现 HTML。

2. 灯塔

来自 Google 的开源工具可帮助您审核 Angular 应用程序的性能、最佳实践可访问性和 SEO。Lighthouse 提供应用程序性能的详细报告以及有助于优化速度的可操作见解。

灯塔测量网站或网络应用程序的响应时间。它包括性能指标，例如交互时间、总阻塞时间和内容性能。它还可以模拟多种网络条件来测试性能。

3.网页测试

它是一个免费的在线工具，允许您从全球不同位置和浏览器测试应用程序性能。使用 WebPageTest，您可以测量应用程序的加载速度并检测 Angular 性能问题。

该工具提供有关速度、加载时间和渲染时间的有见地的报告。WebPageTest 提供了广泛的高级指标来衡量 Angular 应用程序的性能，包括第一个字节和绘制的时间。

4. 角度性能浏览器

它是一个旨在分析和测量 Angular 应用程序性能的工具。Angular Performance Explorer 提供了对渲染、变更检测和可视化界面的洞察，用于探索 Angular 应用程序的性能指标。

此外，它还包括用于优化代码的内存使用、网络请求和 CPU，并总结了潜在问题以及解决方案。这些工具还提供建议，例如优化变更检测策略和延迟加载模块。

最后一句话

（言鼎科技）