Ivy — The new Angular engine
As web developers, we always strive for smaller bundle sizes and faster load times for better performance. Angular Ivy is a next generation compilation and rendering pipeline that addresses these issues by making apps smaller, faster and simpler.
Angular Ivy ?
Ivy a next generation compilation and rendering pipeline that reduces bundle size, makes app load faster in slow networks and simplifies debugging. It is achieved by keeping two main concepts in mind “Tree Shaking” and “Locality”.
Tree Shaking:
Tree Shaking means removing unnecessary code during the build process, this can be achieved by using build tools like rollup and sleeve. These tools will statically analyze the code and decide what to keep by checking references, but these tools will not run actual code. So for fail safety purposes these tools may keep unused code also.
Ivy has been built to optimize the bundle size, we can understand this better by comparing View Engine and Ivy Pipelines.
View Engine Pipeline:
What today’s compiler (Angular version 4 to 8) will do is, it takes the Angular template and generates the sophisticated JavaScript code which consists templates definitions (data structures), these template data structures are interpreted by Angular Interpreter during run time and generates DOM, during this process compiler has to go through various checks, So the generated code some times may not be used in run time.
IVY Pipeline:
The new Ivy Pipeline skips template data structures and template interpreter, instead it generates template instructions (JavaScript code to generate DOM) which does not need an interpreter to process at runtime, these instructions directly create DOM. We can further optimize the bundile size by splitting the code into chunks which we can lazyload by routes. Ivy optimizes these chunks further by removing unused Angular features from route.
if we run ngcc (angular compatibility compiler) in node_modules/.bin
ngc -p src/tsconfig.app.json
we can see the difference in generated code.
Locality :
Ivy compiles each component using only local knowledge, means parent components does not contain child information, this will ensure faster rebuilds by compiling the components which are modified.
In viewEngine pipeline parent component contains child component information so at build time if child changed then parent also need to recompile.
Backward compatibility
Ivy supports backward compatibility, which doesn’t break existing applications and we don’t have to upgrade for Ivy.
How to Use Ivy?
Ivy offered as an experimental feature in version 8.x and as a default compiler in version 9.
In Version 8.x
For new projects using Angular CLI we can generate by using — enable-ivy flag.
ng new my-app — enable-ivy
Get Premkumarreddy Nagarapu’s stories in your inbox
Join Medium for free to get updates from this writer.
For existing projects we can use ivy by setting enableIvy option to true in the angularCompilerOptions in tsconfig.app.json file.
To get faster build we have to enable AOT to true.
In Version 9 (beta)
Update application version using ng update
Ex: ng update @angular/core@8 @angular/cli@8
ng update @angular/core@8 @angular/cli@8 — next
Either way for existing application build process will take more time and node_modules need to update again.
Ivy and Libraries:
Ivy applications can be built with libraries that were created with the viewEngine compiler, this compatibility was provided by a tool known as Angular Compatibility Compiler (ngcc). CLI runs ngcc as needed during the build process.
By default ngcc will run in parallel over third party modules, but it will take more time for the first build. To speed up the process we can run ngcc after each installation of node_modules by using postinstall script.
ex:
ngcc — properties browser module main — first-only — create-ivy-entrypoints
Test Results-Hello world app using Angular CLI:
Below is the github links to Angular version 9 and 8 sample app:
References:
2.A plan for version 8.0 and Ivy
