Over a year ago, the Angular core team announced on ng-conf that they are working on Angular Ivy, and even though it’s not 100% ready for production, I’m feeling like this is a really good time to dive deeper into the new renderer of Angular.
Why Ivy?
First and foremost — Mobile devices!
It might sound insane but 63% of all US online traffic comes from smartphones and tablets. By the end of this year, 80% of internet usage is expected to come from mobile devices. (Source)
One of our biggest challenges as front end developers is to load our website as fast as we can. Mobile devices unfortunately often suffer from a bad or slow internet connection and making this challenge even harder.
On the other hand, we can use many solutions to load our application much faster e.g: use CDN to serve the files from the closest cloud, PWA to cache the assets and many others. But the biggest opportunity we have as developers is Reducing the bundle size.
Reducing the Bundle size
So…bundle size. Let’s see it in action. Let’s take eliassy.dev as a case study. This is a simple web site build with Angular it looks simple but it uses a lot of core features. It also uses the Angular PWA package to support offline and Angular Material with the Animation Module.
Before Ivy, my main bundle weight was a bit more than 500 kb.
Now let’s opt-in Ivy by editing the tsconfig.app.json
We can see that our bundle shrunk in 77KB which is 15% of the bundle size, that means our website’s loading time will be 15% faster.
Some of you might be disappointed by the fact we cut only 15% of the bundle size. The reason for this is even though this is a small project it’s still relying on a lot of core features and for now, Ivy is mainly cutting the generated code and not the framework itself.
Angular’s new renderer Ivy: a deep dive into the heart of Angular - Martina Kraus | NG-DE 2019: