改进的调试

mstmahmuda11121

如今，如果您想在 Web 浏览器中开发单页应用程序，那么如果没有像 Angular 这样的框架，很难想象。使用 Angular 可以更轻松地处理用户交互，例如通过表单或单击控件进行的交互。 使用框架进行开发给 Web 开发人员带来了全新的挑战：10 年前，许多单独的 HTML 页面被交付到 Web 浏览器，但对于单页应用程序，仅交付一个单页应用程序（即所谓的index.html）和所有内容由 JavaScript 使用重新渲染。现在显示网站的主要责任由网络浏览器承担，并且完整交付了所需的 JavaScript。不幸的是，这也意味着如果互联网连接很弱，对于需要下载的非常大的 JavaScript 包来说，应用程序的所谓初始加载时间可能会很长。 JavaScript 因而成为最“珍贵”的资源。开发 Web 应用程序时，您自然希望 JavaScript 包的交付大小尽可能小。 Angular 团队也接受了这一挑战，开发了一个全新的编译器：Ivy。


虽然 Angular 8 Ivy 只能作为选择加入选项使用，但可以通过在创建项目时设置 –enable-Ivy 标志或 华侨资料 使用 中的编译器选项来使用，新的 Angular 编译器现在可以默认提供从版本 9 开始。 除了减小捆绑包大小之外，Ivy 还带来了许多其他优化： 通过单独编译每个单独的文件而不需要额外的依赖项来加快重建速度 使用模板中的断点进行简单的调试设计 改进了模板中的类型检查 本文旨在阐明新编译器的一些优化，并阐明我们作为 Angular 开发人员现在可以使用 Ivy 获得的新可能性。 有关 Angular 的更多专家贡献，请查看我们的免费电子书 新部件开发的任务和优势 通过 Ivy，核心团队现在正在将第三个 Angular 编译器引入到框架中（在版本 2 中引入了模板引擎作为编译器，从版本 4 开始引入了所谓的 ViewEngine，现在在版本 9 中完全被 Ivy 取代）。




但编译器到底是什么？编译 Angular 代码背后的任务是什么？ 在 Angular 中，我们编写了所谓的模板代码，它定义并声明了我们的组件稍后应如何在 Web 浏览器中呈现。编译器由此生成整个 DOM 结构，并将其与我们使用控制器代码以编程方式输入的数据链接起来。这里我们看到一个由编译器生成的 Angular 模板代码及其 JavaScript 代码的简单示例，例如 借助此 JavaScript 代码，我们的 Web 浏览器现在可以接收有关如何构建应用程序的 HTML 树的精确指令。 由于并非每个浏览器都可以运行最新的 ECMAScript 版本，因此您可能必须在中设置 Angular 代码编译所需的版本（可以找到所谓的“目标”版本）。 CanIUse网站很好地概述了 JavaScript 功能以及哪些 Web 浏览器已经支持它们。