How much does Ivy reduce Angular 9 bundle sizes?

Sam Orgill
Nov 8 · 2 min read

The release of Angular 9 is near, with the recent release of Angular 9 release candidate I decided to take Ivy for a quick spin to see by how much it reduced bundle sizes.

Ivy is the all new Angular renderer which promises smaller bundle sizes when you build a project and faster compliation. What this means in the real world is that your Angular apps will load faster for people, something we all strive for in a mobile-first world.

So to test out the bundle sizes, I created two simple Hello World apps in both Angular 8 and Angular 9 in order to test Ivy, which ships with Angular 9.

Rather than install the release candidate on my machine, I created and Angular 8 project and then updated my package.json, in particular moving all angular modules to 9.0.0-rc.1 and updating my Typescript version to 3.6.4 :

// package.json"dependencies": {
"@angular/animations": "~9.0.0-rc.1",
"@angular/common": "~9.0.0-rc.1",
"@angular/compiler": "~9.0.0-rc.1",
"@angular/core": "~9.0.0-rc.1",
"@angular/forms": "~9.0.0-rc.1",
"@angular/platform-browser": "~9.0.0-rc.1",
"@angular/platform-browser-dynamic": "~9.0.0-rc.1",
//...
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~9.0.0-rc.1",
"@angular/compiler-cli": "~9.0.0-rc.1",
"@angular/language-service": "~9.0.0-rc.1",
//...
"typescript": "~3.6.4"
}

I then had to enable Ivy in the tsconfig.app.json file:

"angularCompilerOptions": {
"enableIvy": true
}

And voila, I was good to go.

I built both projects with the command ng build --prod and the results we’re that the Angular 9 app had a bundle size of 103kb vs a 131kb for the main file, a 23% decrease.

Angular 8 App
Angular 9 App

I was impressed by this result, even if it wasn’t the earth shattering figures of 10% I had heard bandied about. However, Ivy is not production ready and as it is developed these bundle sizes will be squeezed even more.

It is sometimes said that Angular is not the best option for smaller apps and that is should be reserved for large scale ones. With the release of Ivy I think that reasoning is becoming weaker.

I look forward to the future of Ivy and Angular!


codeToBe

Learn to code and be free.

Sam Orgill

Written by

Freelance web developer 👨‍💻 samorgill.com Founder & CEO of Code To Be - online courses for people who want to code their way out of the rat race 🕸

codeToBe

codeToBe

Learn to code and be free.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade