使用 Ivy 渲染引擎的 Angular 应用

mstmahmuda11121

具体来说，这意味着在我们的示例中，createPipe 函数的整个 JavaScript 源代码都被编译到包中，从而传递到 Web 浏览器，即使我们从未使用过该函数。 在这个非常简化的示例中，只有三种情况，但总共有超过 15 个不同的选项和函数可能包含在交付中，即使我们实际上并不需要它们（为了仔细查看 createViewNodes 函数，可以通过使用 ng build 编译 Angular 项目来查看，然后该函数位于。 因此，ViewEngine 不遵循所谓的“tree shake”（也称为“死代码消除”）原则，即未使用（即未调用）的代码不会编译到捆绑包中。 这正是新 API 发挥作用的地方：使用新引擎，组件本身现在可以直接调用源代码来呈现 HTML 节点。这意味着可以准确确定组件需要哪些函数才能在编译时呈现。


这反过来意味着不被任何组件调用的函数可以从 Angular Core 包中删除。 如果您仅在 华侨资料 文件中定义 HTML 和文本节点（如我们的介绍性示例所示），则前身 ViewEngine 和 Ivy 之间的包大小比较非常重要。不过，还必须提到的是，这种死代码消除的创新只影响模板源代码。模块源代码，例如ReactiveFormModule或HttpClientModule中的模块源代码，已经根据此原则进行了缩减。 更快地重建 Angular 应用程序 Ivy 现在提供的另一个功能是更快地重建我们的 Angular 应用程序。这是通过单独编译每个单独的文件而无需任何额外的依赖项来实现的。最初看起来很合乎逻辑的内容在 ViewEngine 生成的代码中看起来有所不同。出于演示目的，我们使用简单的ngIf指令扩展了 HTML 模板并重新编译了项目。




该组件还包含有关 ngIf 指令的依赖项的信息 除了已知的用于渲染div HTML 节点的模板指令之外，我们现在还看到了 ngIf 指令的定义。然而，该指令接收另一个参数：[i1.ViewContainerRef, i1.templateRef]。但是，该数组并不是组件的直接依赖项，而是ngIf指令的依赖项。 结果，组件代码不仅包含其自身的依赖关系，还包含其依赖关系的依赖关系。更改所用指令的依赖关系的效果很快就会显现出来：所有使用该指令的组件也必须重新编译。这称为所谓的全局编译。 现在我们在这里看到 Ivy 编译的等效项局部性原则：组件只知道其直接依赖关系 这里只声明组件的直接局部依赖：这就是所谓的局部性原则。新的API相应地还提供了定义指令的函数：ɵɵdefineDirective。这又包含ngIf需要显示的所有信息。