Web前端：优化Angular应用程序以提高网站速度的技巧

　　跨企业领域的许多已知和产生流量的网站都使用网站优化方法进行 Angular Web 开发，Angular 作为前端框架因其功能丰富、健壮、高性能的特点而广受欢迎。

应用内显示的性能问题是直接影响应用对最终用户体验的巨大问题。网络流量下降、商业网站上没有流量或客户参与度下降是该应用程序的缺点。Angular 存在一些问题，例如跳出率高，其中一些因素可以让你快速了解应用程序是否遇到问题。

如何优化 Angular 性能?

1.变更检测策略.OnPush

更改检测是开发人员用于应用程序开发的最常见功能之一。它主要可以检测用户的数据何时随着DOM的更新而改变或改变，以反映变化。

在这里，框架组件具有用于从其父组件获取数据的信息。当异步事件发生时，Angular 会解析组件树并包含与之前值不同的数据。通过严格相等运算符，检查应用程序性能是否存在差异。此操作员检查分支输入或组件中的连接更改。因此，为输入的当前值分配了新的内存。

2. 分离变更检测器

当你计划使用 Angular 开发网站时，它会遵循带有变更检测器的树形部分。我们可以渗透这个变化检测器 (ChangeDetectorRef) 以分离 CD 树的元素或将其连接到 CD 树。

因此，当 Angular 在元素树上运行 CD 时，它的元素及其子树将被跳过。开发人员通过使用 ChangeDetectorRef 类来执行此操作。

导出抽象类 ChangeDetectorRef：

3. 延迟加载

作为 AngularJS 应用程序开发的基本功能之一，延迟加载让开发人员能够处理路由器和组件的复杂性。它允许他们避免块文件造成的混乱，并将大块文件分成多个较小的文件。它将附带 JavaScript 组件;它们仅在触发特定路由器时加载。

4. 提前编译(AOT)

AngularJS 应用程序开发中的 AOT 编译有助于将 TypeScript 代码转换为优美的 JavaScript 代码，并在运行之前优化和压缩整个代码。这是 Angular 的主要功能之一，是用于提高网站速度的默认功能。

5. .JIT 与 .AOT

Angular 提供了两种编译模型，即即时 (JIT) 和提前 (AOT)。JIT 模型在运行时编译你的应用程序，而 AOT 编译发生在构建时。默认情况下，开发人员使用 JIT 编译，这需要他们为你的软件开发包含 Angular 编译器。另一方面，AOT 预计在开发时进行编译，只提供已编译的模板，并从部署包中删除 Angular 编译器。

它还将你的应用程序负载减少了大约 1MB，大约是 Angular 编译器的大小。Angular JS 开发公司还使用带有 AOT 按钮的 CLI 命令编译它，并利用 AOT 优化：

6. 提供缩放图像

Serve Scaled Images 用于提高 Web 应用程序的速度。这是一个缩放网站中使用的图像的过程，它使用缩放的图像优化网站。虽然大图像可能会被压缩成固定大小，但它会占用额外的空间来降低网站的速度。

为了优化角度性能并避免网站速度下降，开发人员必须确保上传的图像是网站上 HTML 图像的实际大小。

7.优化图片

在开发和执行 Angular 应用程序时，优化图像是提高网站速度的另一个重要方法。与网站一起，图像优化有助于提高网站性能。

因此，Angular Web 开发建议保持文件大小以千字节为单位，并避免以兆字节为单位上传图像。开发人员在上传图片时会牢记这些事情，因为在上传之前将大图片转换为更小的文件很重要。

8.代码拆分

代码拆分是另一种减少加载时间的方法，它还有助于加快页面导航。一旦开始构建和开发 Web 应用程序，它们就会变得更加复杂。因此，发送给用户的 JavaScript 文件增加了，这使得任务更简单。由于其巨大的 JavaScript 文件，它会减慢浏览器中的交互时间，尤其是对于移动用户而言。

对于 Angular 应用程序优化，代码拆分有效地减少了应用程序中的 JavaScript 负载。请注意，执行此过程不会丢失功能。这种技术通过将代码分成多个部分来帮助开发人员划分 JavaScript 代码，这些部分可以随着用户导航到不同的路径而逐渐加载。

Angular 应用程序的所有网络优化技巧都将有助于提高网站速度并减少负载。了解使你的 Web 应用程序性能更高的每个技巧并知道何时应用它们会产生关键的差异。