Angular compiler under the microscope (Part 1)

If you agree with me Angular compiler is worth taken to the lab. Recently, I wanted to know what is going on behind the Angular compilation process so it was time to dismantle and see for myself. Honestly it was very interesting and thanks to the great minds (Google Angular developers team) for building such a wonderful engine.

As with many of my posts, I think it’s a good idea to follow along as I go, and therefore there are few things you’ll need to have installed on your machine before we get started if you’d like to follow along.

I won’t be talking about the installation process of this packages since it’s almost out side of the scope.

Packages Needed in this Lab

1. Node js & (NPM or Yarn).
2. Angular CLI

We also need another great tools source-map-explorer

npm i -g source-map-explorer

Getting started

Alright, now it’s time to pick up your microscope and let see what the compiler got, to begin lets create a new project to play with, go to your work directory and type:

ng new compiler-microscope

This will take a minute but you will end up with a new project and don’t forget to change directory into the project and type:

ng build

This will create a dist folder with the compiled application. You’ll notice that the size of the result JavaScript files is quite big, if you look inside of the dist folder, you will see a vendor.bundle.js file which is about 2 mb in size this is obviously not ideal!

Pick up your microscope and take a look inside the vendor.bundle.js file you’ll see tons of JavaScript, none of this is minified. We can minify them with a package called uglify to get — about 650kb but this is still very big for a plain hello word application.

This is where source-map-explorer comes into play — it allows as to peak into the bundle and find out what makes it big, lets try by typing:

source-map-explorer dist/vendor.bundle.js

Wait a few seconds and get an out put that looks like this:

We can see that the compiler module accounts for nearly 50% of the bundle that is about 1mb (or 320kb when minified). Luckily it’s very easy to get rid of that compiler simply run

ng build -prod --sourcemaps

to remove the compiler part. This is what the AOT (Ahead of time) compilation is doing under the wood.

Now, have a look at the dist directory: the vendor javascript file has now shrunk to 310kb and using source-map-explorer we can see that the big compiler chunks now gone.

We can also shave off another 30% of the bundle size by removing the forms and the HTTP modules(if we don’t need them) — hoping in the future the build system will be smart enough to do this for us. Terms for removing unusual code is called “Tree shaking”. Then, if we actually remove forms and HTTP the fill will fall to just around 79kb.

So what is angular compiler doing here? How come we have removed it and the app still works? why is it needed in the first place? All this questions will be answered in the next article(Part 2) because looking at the microscope for too long can affect your eyes so lets take a break :)