什么是 Angular Ivy Partial compilation mode

简介: 什么是 Angular Ivy Partial compilation mode

compiling with Angular sources in Ivy partial compilation mode.


Angular Ivy partial compilation mode 是 Angular Ivy 编译器的一种模式,它是为了优化 Angular 应用程序的性能而引入的。在这种模式下,编译器只会重新编译那些发生变化的部分,而不会重新编译整个应用程序。


这种编译模式的优势在于,可以在开发过程中快速重新编译应用程序,从而提高开发效率。此外,它还可以缩短应用程序的启动时间和加载时间,因为只需要编译那些发生变化的部分。


Ivy partial compilation mode 是通过 Angular 的 JIT (Just-in-Time) 编译器实现的,而不是通过预编译器 (AOT,Ahead-of-Time) 实现的。这意味着在运行时需要花费一些额外的时间来完成编译,但可以在开发过程中实现更快的迭代速度。


总之,Ivy partial compilation mode 可以帮助 Angular 应用程序实现更好的性能和更高的开发效率。


18d5c415bd4061aa9cb3171bbb71447c_c98bb5a62f511111be55f5294f9fb446.png


Angular Ivy 是 Angular 9 之后的默认编译和渲染引擎。它是一种全新的 Angular 渲染引擎,提供了更快的编译速度、更小的包大小、更好的性能和更好的可调试性。在 Angular 9 之前,Angular 使用了 View Engine 作为其默认的编译引擎。


Angular Ivy 引入了 Partial Compilation 模式,这是一种优化编译的方式,它允许 Angular 应用程序只编译更改的部分,而不是整个应用程序。这种编译方式可以显著减少构建时间和生成的包大小。


在本文中,我们将深入探讨 Angular Ivy Partial Compilation 模式的工作原理、优点和用法。

工作原理

Angular 应用程序由组件树组成。组件是 Angular 应用程序的基本构建块,它们可以嵌套在其他组件中。在 Angular 应用程序中,每个组件都有一个模板,它描述了组件的外观和行为。


Angular Ivy 的 Partial Compilation 模式通过将组件模板分解为更小的部分来实现部分编译。这些部分被称为“翻译单元”,它们可以是模板中的元素、指令、管道等等。


当 Angular 应用程序中的组件发生更改时,Angular Ivy 会将这些更改标记为“脏”,然后只重新编译与这些更改相关的部分。这样可以减少编译时间和生成的包大小。


在 Partial Compilation 模式下,Angular 应用程序被编译成一系列 JavaScript 函数,每个函数负责处理一个特定的翻译单元。当组件被创建时,这些函数会被调用,以生成组件的 DOM 元素和相关的事件处理程序。

优点

Partial Compilation 模式有以下几个优点:


更快的构建时间:部分编译可以显著减少构建时间,因为只需要重新编译与更改相关的部分,而不是整个应用程序。这意味着开发人员可以更快地看到其更改的结果。


更小的包大小:部分编译可以减少生成的包的大小,因为只编译与更改相关的部分。这可以帮助减少应用程序的加载时间,提高用户体验。


更好的可调试性:由于 Partial Compilation 模式生成的代码更少,因此调试更容易。开发人员可以更轻松地跟踪和修复应用程序中的错误。

相关文章
|
7月前
|
JavaScript 前端开发 编译器
什么是 Angular Ivy Partial compilation mode
什么是 Angular Ivy Partial compilation mode
34 0
|
6月前
|
前端开发 JavaScript 测试技术
什么是 Angular 的 Custom component
什么是 Angular 的 Custom component
33 1
|
7月前
|
存储 JSON JavaScript
什么是 Angular Pre-built libraries
什么是 Angular Pre-built libraries
23 0
|
7月前
|
UED
Angular 中的 code splitting 和 lazy loading 技术
Angular 中的 code splitting 和 lazy loading 技术
36 0
|
7月前
关于 Angular Lazy loaded modules 中的 providers
关于 Angular Lazy loaded modules 中的 providers
21 0
|
7月前
|
JavaScript 前端开发
如何对 Angular Lazy Loaded Module 进行 Customization
如何对 Angular Lazy Loaded Module 进行 Customization
24 0
|
7月前
|
JavaScript 前端开发 开发者
关于 Angular eslint-disable-next-line 注释的使用
关于 Angular eslint-disable-next-line 注释的使用
34 0
解决Cannot find module '@angular/compiler-cli'
解决Cannot find module '@angular/compiler-cli'
111 0
解决Cannot find module '@angular/compiler-cli'
|
存储 JavaScript 前端开发
Angular Package Format (APF) v12.0 介绍
Angular Package Format (APF) v12.0 介绍
179 0
Angular Package Format (APF) v12.0 介绍