During the development of Angular 2, I was concerned about the size of the new framework compared with AngularJS. It’s also harder to tell now that the setup is more complicated. Back with AngularJS v1.5 for example, you can look at the size of angular.min.js at around 160KB, which shrinks to around 57KB with server compression. Although in a typical application you would probably be adding other libraries like angular-animate and angular-translate, at least the starting size is very small, plus you can easily look at the size of the additional libraries too.
When I first started playing with Angular 2, I did an ‘ng serve’, and the Angular-CLI tool collected everything together (using webpack) and it displayed nicely in my browser. But then I looked in the browser console and was rather shocked to see 2.5MB – 16 times bigger! Your web app would take around 15 seconds to load that over a 3G connection, some users would give up before then! Of course, it’s not as bad as all that, it’s due to the runtime engine used by Angular during development. When Angular 4 was released it was described as ‘smaller and faster’, so I thought I’d take a closer look.
I created a basic test app in Angular 4, and with ‘ng serve’ it was still about 2.5MB. I then did ‘ng build –prod’ and looked in the generated ‘dist’ folder – the files were down to around 400KB, looking promising. I then put them in a server with compression, and it’s only 97KB, sweet! That same 3G connection (measured using Chrome’s network throttling test mode) loads everything in under 700ms, instead of 15 seconds!
So still larger than AngularJS v1.5, but perfectly acceptable in my opinion, unless you are targeting users on really slow networks. Also it looks like further optimisations are possible using Ahead-of-time(AOT) compilation – something to investigate later!
Matt's Front End Development Blog 