Skip to content
Home » Angular Ivy distribution

Angular Ivy distribution

In this post, we will learn about Angular Ivy and its features.

What is Ivy

  • It is Angular’s compilation and rendering pipeline since Angular 8.
    View Engine‘ was the default compiler in previous Angular versions.
  • A complete rewrite of Angular’s rendering engine.
  • it is the fourth rewrite of the engine and the third since Angular 2.
  • It is very advanced and offers advanced features that were not available before.
  • Applications developed in Angular 9+ are Ivy compiled by default.

Features of Angular Ivy

  • Applications are compiled Ahead of Time (AOT) which means the application is compiled before the browser downloads and runs it hence making the application faster and more efficient.
    Previous Angular versions used the Just In Time (JIT) compilation technique.
    AOT: HTML and TypeScript codes are converted into efficient JavaScript code during build time even before the browser downloads and display it. This facilitates faster rendering in the browser since the browser downloads the precompiled version of the template.
  • Components are compiled more independently of each other.
  • Fast loading of the application even with slow networks.
  • Improves development times because recompilation of the application will compile only components that are changed.
  • Ivy doesn’t need metadata of any declarable dependencies to compile a component.
  • Reduces bundle size.

Two key aspects that Ivy always considers are Locality and Tree Shaking.

Tree Shaking
  • It is a concept of removing unused code during the bundling process.
  • This can be done by using tools like Rollup and Uglify.
  • During the build process, tree-shaking tools use static analysis and eliminate unused and unreferenced code.
  • Limitations: An unused code path within a conditional code (“IF” statement) cannot be identified by a static analyzer and that code still resides in the bundle even if it is not used during runtime.
    Due to the above limitations, the current rendering pipeline is modified to optimize the bundle size.
Locality
  • It is a process of compiling each component independently with its own local information that rebuilds faster by compiling modified changes and not the entire project files hence it increases the speed of your build process.
  • In the existing angular version < 8, each component has its parent information, which leads to compilation dependencies whereas, in Ivy, each component is independent.
  • To compile a component in Ivy, Angular only needs information about the component itself, except for the name and package name of its declarable dependencies.

Visit Techtalkbook to find more related topics.


References

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Pin
Share
Share
Share