Optimizations by Angular

A hands-on introduction on how Angular loads all the files of the application and reduces the size of an application

Photo by Ilya Pavlov on Unsplash

Have you ever wondered

• How Angular renders all the HTML, CSS, Typescript files present in the application into the browser?
• What happens to the code when the application is run in production(prod) mode?
• What if the developer accidentally creates any component or any piece of code that is not used anywhere in the application?

So after reading this article one should be able to answer the above questions. Let’s dive into the topic.

Angular implicitly or explicitly does some optimizations for the application. They are:

1. Bundling
2. AOT Compilation
3. Minification
4. Uglification
5. Tree shaking

Let’s get into the above-mentioned ones in detail.

Bundling: Bundling is the process of combining code in multiple files into a single file. So during compilation, Angular generates 5 javascript files and loads them into the application. They are :

• inline.bundle.js (or) inline.js
• polyfills.bundle.js (or) polyfills.js
• main.bundle.js (or) main.js
• styles.bundle.js (or) styles.js
• vendor.bundle.js (or) vendor.js

So out of above files, the entire application code present in all typescript files along with HTML, CSS files were rendered into ‘main.bundle.js’ or ‘main.js’. Hence this particular file has higher memory than the rest of the four files. Let’s see it in practice.

HTML file in the root componet (app.component.html)

app.component.html which was rendered in main.js file

app.component.scss which was rendered in main.js file

Note: This happens in dev build as well as prod build
1. ‘ng build’ by default generates ‘dev’ build in dist folder
2. ‘ng build — prod’ generates ‘prod’ build in dist folder

AOT compilation: In this mode of compilation, instead of loading compiler into the application only precompiled code is loaded. Thus reducing the memory of the application drastically. This particular topic needs a separate explanation. For more details, I’ve explained AOT Compilation in detail in the below mentioned article. Please do visit it.

Compilation in Angular

Minification: Do you really think the browser which ultimately runs the code at the end needs extra whitespaces, comments, optional tokens like curly braces, semicolons from the code?

Hence during run time they can be removed in order to reduce the file size. This is handled by Angular itself. This process minifies the files. Hence this is called ‘Minification’. Refer to the below images which shows the difference between the original code and minified code.

Non minified code generated by DEV build in main.js or main.es2015.js file

Minified code generated by PROD build in main.js file (Observe the difference of code in displayProgress method with that of non-minified code)

Note: This happens only in the ‘prod’ build but not in ‘dev’ build. But why? (During development it is required for developers to debug the code in dev-tools provided by browser. Developers cannot understand such a minified code. Hence it is done only in ‘prod’ mode)

Uglification: So, once after Minification was done to any file can we further reduce the size of the file? . Yes, we can. Let’s see how.
Does the browser need beautiful variable, parameter names present in any functions to run the code? Not at all. Hence those beautiful names, which are only made inorder for the code readability can be reduced to one or two letter variables. This process converts beautiful, human understandible variable names into ugly ones. Hence this process is called ‘Uglification’. Angular also handles this process. Refer to the below images which shows the difference between the original code and uglified code.

Observe the parameter passed to displayProgress function, it was modified from count to e (for non-minified, non uglified code, refer to the image in minification example)

Note: This happens only in the build produced in ‘prod’ mode but not ‘dev’ mode.

Tree shaking: After all the above processes were done, is there any other way to further reduce the size of the application ? Yesss….. We can.
Think of the unused piece of code present in the application. Hence the process of removing any unused code in the application is called Tree shaking. Angular also handles this process. Let’s see this in action :

A component named TestComponent is created and it is not used anywhere in the application. Let’s search for the text present in the html file of this component in both ‘dev’ and ‘prod’ builds.

Text in test.component.html

Observe the rendering of test.componet.html file in the main.js file even though it is not used anywhere in the application (dev build)

No occurence of the text in the main.js file generated in ‘prod’ build

Note: This happens only in the ‘prod’ build but not in ‘dev’ build

Now, scroll up and try to answer the questions given at the beginning of this article.

Thank you very much for reading to me, and thank you for your time :)