Angular 是 Google 的旗舰开源 Web 应用程序框架，旨在开发高效而复杂的单页应用程序 （SCA）。 它是一个跨开发平台，能够 跨Mac，Windows和Linux构建现代渐进式Web应用程序，移动和桌面安装的应用程序。 除了强大的开发生态系统外，Angular 还提供开箱即用的干净结构，使开发人员能够遵循设计模式来构建、扩展和维护项目。 这使开发人员能够轻松地混合和匹配组件 ，从而使用 解耦的组件实现平滑的应用程序设计。
但是，仅编写代码来构建 Angular 应用程序可能会导致性能 问题和加载时间变慢。 利用框架中的最新功能，并努力重组项目结构、文件和代码只是开发人员优化整体绩效的少数操作。 如今，人们对闪电般的加载时间寄予厚望，这要求开发人员关注其他方面，例如构建和部署 时间 、代码增强技术以及操作策略，以便在运行时监视应用程序的指标，以提高应用程序性能。
确定应用程序性能和加载时间时的问题
由于 Angular 是一个基于类型脚本的现代框架，提供动态网页，因此它在监视其性能和加载时间方面提供了一些挑战。 准确测量页面上呈现新内容的时间很麻烦，因为 SPA 在网页 加载后不会在浏览器中触发新的导航。 因此，HTTP监控工具（以及 API监控工具）不会提供重要的指标来优化加载时间，因为Angular不会触发对服务器的新浏览器请求。
此外，尽管 HTTP 响应决定了网页发送的请求的结果，但它们在分析、执行和呈现嵌入的 JavaScript 文件和相关资源时无法把握真正的加载时间，直到用户能够与页面完全交互。 对于如何在浏览器中测试和监视 JavaScript 事件，有必要采用不同的方法来接收来自客户端的准确加载时间。
优化加载时间的工具
Angular 提供了一系列工具和技术，可帮助减少应用程序的加载时间并随着时间的推移监视其性能，尤其是在应用程序规模足够大以处理多个繁重的计算之后。 其中一些技术，可以帮助减少应用程序的初始加载时间和加快页面导航是提前（AoT）编译，代码拆分和预加载模块。 我们将更详细地讨论这些技术。
提前编译
编译 Angular 应用程序的主要方法有两种：实时 （JiT），它将在运行时在 Web 浏览器中编译应用程序，而作为名称状态的提前时间 （AoT） 在生成时编译应用程序。 AoT 编译器在 Web 浏览器下载 HTML 和 TypeScript 代码之前在生成过程中组装代码。
它通过显著减少应用程序启动的时间，有助于加快渲染过程。 这样，Web 浏览器加载可执行代码，即可立即呈现应用程序，而无需等待应用程序编译。 此外，预编译的代码通过在应用程序内添加这些资源（如 HTML 模板和外部 CSS）来减少对外部源的 异步 请求的数量。 因此，编译的代码可缓解对这些文件的单独 AJAX 请求。 因此，用户体验变得越来越流畅、更快。
代码拆分
简而言之，代码拆分会以不冒应用程序功能风险的方式分离应用程序的 JavaScript 捆绑包。 它在 初始加载期间保持对主要 JavaScript 代码的控制。 代码拆分可以在应用程序内的不同级别完成，例如通过入口点、动态加载的模块和共享代码， 借助 SplitChunksPlugin 的帮助， 同时防止代码重复。
在角应用中，有两种代码拆分的主要方法：组件级代码拆分和路由级代码拆分。 两种方法的主要区别在于，组件级代码拆分以懒惰方式加载单个组件，即使没有路由导航，而路由级别代码拆分则懒惰地加载单个路由。 在任何情况下，这两种方法都可以测试考虑应用程序的 TTI（交互时间）。 TTI 是一个很好的性能指标进行比较，因为它衡量的是应用程序响应需要多少时间。 换句话说，应用程序加载需要多长时间，以便用户可以与它进行交互。
预加载模块
预加载模块是在角应用程序中提供的一种技术，它允许按照既定规则尽快加载模块。 模块可以同时预加载，当特定事件发生时，或只是选定的少数，具体取决于具体情况。 开发人员可以检查模块加载需要多少时间以及使用预加载策略的内在价值。 Angular 中的预加载模块与延迟加载非常相似，只是应用程序模块在所有已加载的预加载模块成功加载后就加载了。 这样，当用户导航到延迟加载的模块时，可能丢弃延迟，同时仍然受益于应用程序的初始加载速度，因为应用程序的初始模块首先加载。
Angular 的默认预加载策略 是预加载所有模块和 NoPreload。 第一个意味着预加载所有惰性可加载模块，而后者禁用任何预加载。 在使用预加载模块的情况下，如果应用程序具有大量模块，则应用程序可能会面临瓶颈。 然后，当考虑自定义预加载策略可能是有益的。
在企业方案中，使用自定义预加载策略的概念可能更有意义。 例如，首先预加载最昂贵的模块，而不是那些资源成本较低的模块，可能是开发人员可以使用的方法。 此外，预加载模块的时刻在减少加载时间方面也具有重要作用。
使用 LoadView 加载测试角应用程序
LoadView 提出了一个创新和整体的解决方案，以解决 HTTP 监控工具的局限性，并加强 Angular 开发人员今天在客户端控制、监控和优化其应用程序的工具。 LoadView 是一个基于云的负载测试平台，通过实时模拟数千个并发连接，提供对网站、Web 应用程序和 API 的压力测试监控，帮助识别瓶颈并验证整体性能。
创建帐户后，开发人员可以通过创建设备来测试他们的网站和 Web 应用程序，该设备存储要测试的网站或应用程序。 通过选择”网站”选项，Angular 开发人员可以通过配置数千个用户同时尝试访问该页面的场景来测试其应用程序着陆或登录页面的初始加载时间。 另一方面，通过选择Web应用程序选项，Angular开发人员可以 编写脚本并测试其应用程序的特定用例的加载时间。
例如，填写表单、浏览应用程序内路由、从服务器对加载的数据进行排序，以及通常测量其应用程序的 TTI。 LoadView 允许用户以三种不同的方式个性化 其测试负载 类型，以及一个执行计划，该计划设置一段时间内要建立的连接数。 此外，LoadView 更进一步，可以安排连接到网站的虚拟用户的地理 分布 。
与传统方法相比，LoadView 为工程师提供了一种高效且经济高效的方式来自动化 负载测试过程。 没有更昂贵的投资和耗时的流程。 开发人员和 测试人员 不必担心保持在分配的预算范围内并设置基础结构。 他们可以专注于他们最擅长的，这就是执行测试。 通过基于浏览器的实时测试，结果和见解直接与用户旅程相关，确保您的应用程序能够经得起峰值加载场景的考验。
最后，LoadView 能够显示 模拟结果的完整深入报告。 它可以显示用于建立虚拟用户连接的方案执行计划的图形表示形式、每个用户的平均响应时间以及执行方案时每个会话发生的错误数。 这些图表和性能数据使有机会查看模拟特定时刻的详细信息，以便获得有关呈现到页面的每个元素的加载时间的重要见解。 这对角应用程序非常有益，因为它允许开发人员对可能延迟应用的 TTI 的特定元素执行操作。 从这个意义上说，LoadView 填补了准确测试和监控 JavaScript 事件以测试客户端加载时间的空白，从而成为前端开发人员应该拥有的强大资产。
结论：角网应用性能
当前的需求提高了现代 Web 应用的性能标准。 当今的 DevOps 团队必须牢记，应用程序响应时间和应用 TTI 成为新应用程序有机会在市场上竞争的关键因素。 通常，Angular 开发人员必须在设计应用程序时持续评估减少加载时间的技术，如 AoT 编译、代码拆分和预加载策略，并更进一步。 使用 LoadView 持续测试和监视客户端操作和指标，以确保最佳的用户体验和应用程序性能。
有关更多信息，请访问 LoadView 网站并注册免费试用版。 您将收到最多 5 个免费负载测试 ，以帮助您入门。
监控角网应用
对于您的 Angular 应用程序的部署后性能，请务必查看我们的网站 和 Web 应用程序监控解决方案 Dotcom-Monitor。 Dotcom-Monitor 解决方案附带了监控角度 Web 应用程序所需的所有功能和优势，例如真实浏览器、实时警报、性能报告和仪表板，当然还有 EveryStep 网络记录器，以帮助您帮助监控用户步骤和关键事务。 更妙的是，用于加载测试角网应用程序的脚本可以传到监控平台中，因此无需重新录制脚本。 这两种解决方案使用相同的 界面，因此在两种解决方案之间切换既简单又轻松。 请免费尝试有关角应用程序的 Web 应用程序监控。