Angular 9 upgrade – What’s the real difference?

By Thomas James 15/02/2020

Angular 9 has just come out with ivy being the big talking point the Angular team have been showing some impressive numbers of reducing the size of the bundles created on publish. As with all numbers given by the creators you should take them with a pinch of salt but to be fair to the Angular team, they did say in the release blog post that the size improvements depends on the size of complexity of your app. If you have not done already you should read their blog post.

I was interested to see what improvements Kasera would get from Angular 9 upgrade as Kasera is a medium size application with server side rendering I feel it ticks many of the boxes of a “middle ground real app”. For this comparison I am using Angular 8.2.14 and Angular 9.0.0 both the latest version of each version at the time of righting. I am simply upgrading the application and getting it to a point where it works, no other changes are being made - let’s get straight into it.

Bundle Size

Excluding all assets for Angular 8 the size on disk was 3.32MB, this is a very good size but amazingly in Angular 9 it dropped to 2.88MB an amazing 13.25% reduction on a medium size app where the Angular team would expect around a 2% size improvement. I was very impressed with this judging that all I had to do was upgrade the framework.

As Kasera is an Angular universal app it also creates a Dist Server main file, this in Angular 8 was 1.75MB however oddly in Angular 9 this increased by 187.43% to 5.03MB. The only difference is the main.service.ts file now exports he renderModule and renderModuleFactory from @angular/platform-server – this was auto added during the upgrade. As this file never leaves the server it doesn’t matter that it’s a few MB larger.

Client Download Size

Now this reduction in size is all well and good but what matters is the download size for users. I picked to test our home page and our simplest page the sitemap and as this is a real word test, we care about the compressed size as this is the size that was sent over to the user – for Kasera we use br compression. For Angular 8 our home page was 679KB and our Sitemap came in at 501KB both very respectable. Even though there was a 13% size reduction in the bundles this only amounted to a 1KB drop for the home page (678KB) and a 10KB drop in the sitemap (491KB). This was disappointing as I was hoping for around the same percentage reduction as seen in the bundle size. However uncompressed values the sitemap was 200KB less in Angular 9 (2.2MB) compared to Angular 8 (2.4MB) but for the home page they both came in at the same size (2.6MB).

Angular 8 - Home Page
Angular 8 Client Download Size
Angular 9 - Home Page
Angular 9 Client Download Size

Performance

The most important thing for any application is its performance, the faster a page loads the less likely you are to lose users that’s a fact, so load speed is the single most important part of any public facing application outside of SEO. For Angular 8 both the home and sitemap pages took 1.41 seconds to completely load on a wired connection. I was not expecting any improvement as the client download size was the same, amazingly there was an 8.51% load speed improvement for both home and sitemap down to just 1.29 seconds this just from upgrading the framework is impressive.

Angular 8 - Home Page
Angular 8 Load Performance
Angular 9 - Home Page
Angular 9 Load Performance

Conclusion

Overall, I have been happy with the improvements for very little effect, all I had to do was change one open source package as it didn’t support Angular 9 yet but that’s the risk you take when using open source packages other than that ng Update did its job and nothing broke which is always a bonus.