Angular Size From Version 2 To 14

Have you ever wondered how was Angular 2 compared to the current version, or maybe Angular before Ivy? In this article, I will show you the build time of a simple hello world application built with Angular from version 2 to 14.

Let’s get started with the data itself

+=================+============+===============+================+
|     Version     | build time | Transfer size | Resources size |
+=================+============+===============+================+
| Angular 2       | 8426ms     | 106 KB        | 443 KB         |
+-----------------+------------+---------------+----------------+
| Angular 4       | 8000ms     | 84 KB         | 295 KB         |
+-----------------+------------+---------------+----------------+
| Angular 5       | 14749ms    | 68 KB         | 223 KB         |
+-----------------+------------+---------------+----------------+
| Angular 6       | 12761ms    | 73.4 KB       | 239 KB         |
+-----------------+------------+---------------+----------------+
| Angular 7       | 13081ms    | 61.5 KB       | 203 KB         |
+-----------------+------------+---------------+----------------+
| Angular 8       | 18910ms    | 58.4 KB       | 176 KB         |
+-----------------+------------+---------------+----------------+
| Angular 9       | 12443ms    | 50.6 KB       | 146 KB         |
+-----------------+------------+---------------+----------------+
| Angular 10      | 10045ms    | 49.2 KB       | 143 KB         |
+-----------------+------------+---------------+----------------+
| Angular 11      | 9874ms     | 48.6 KB       | 141 KB         |
+-----------------+------------+---------------+----------------+
| Angular 12      | 9132ms     | 49.7 KB       | 141 KB         |
+-----------------+------------+---------------+----------------+
| Angular 13      | 4104ms     | 45.4 KB       | 124 KB         |
+-----------------+------------+---------------+----------------+
| Angular 14      | 4606ms     | 45.3 KB       | 124 KB         |
+-----------------+------------+---------------+----------------+
| Angular 14 (SA) | 4815ms     | 43.7 KB       | 118 KB         |
+-----------------+------------+---------------+----------------+

Note 1: There was no Angular 3 released, that’s why it’s missing here

Note 2: The last one (SA) is built with standalone component without any NgModule; if you want to know more about it, read my other article: First Look at Standalone Components: Angular Beyond NgModules.

Few insights

You can see that the size is always being reduced (except for Angular 6).

The biggest reduction is with Angular 4 (33%).

The build time was getting higher while trying to optimize the code, but from Angular 13, it got improved a lot (55%) — largely because of caching — but while also reducing the size (9%).

Removing NgModule isn’t much beneficial when it comes to size (at least for now) with 4% reduction in the resources size, but only 1.6% for the actual data transfer, while making the build time higher.

How is it done?

You might be wondering how it was done, and if it was complicated to answer this, I will explain the whole process

First thing I used: an npx package to specify which version of the @angular/cli to use, for example, to generate the Angular 10 version, I ran:

npx @angular/cli@10 new ng10

But that wasn’t always working out of the box, for example Angular 2 CLI (it was actually version 1.0 to 1.5 then 6.0) wasn’t that stable and it was generating Angular 5 when used, so I had to downgrade the version to make it Angular 2.

Also, old Angular versions needed old Node versions, I used nvm to make it work.

With some bugs I faced with the old version (before Angular 6), it made me appreciate much the current versions of the Angular CLI.

If you want to see the code and play with it from here:

GitHub - robertIsaac/ng-size: Angular default project from version 2 to 14

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.