Minification in Angular

The performance of any application is one of the key factors to determine the user experience in this world. If performance is low, the application would fail to achieve its real value to the user. Therefore, there are various practices that are encouraged to adopt during coding to achieve greater performance in the production environment.
Similarly, the Angular framework also provides various options to achieve greater performance at runtime. Some of these are AOT compilation, bundling, minification etc. In AOT compilation, the Angular compiler runs before the app is deployed thus reducing the overall size of the application. But this is not happening by default by the Angular framework.

Now, let’s talk about the default processes that are adopted by the Angular framework which helps the developer to achieve a greater performance i.e. bundling and minification. Let’s talk about them in detail below:

Bundling and minification are two important processes that Angular adopts to reduce the size of the application so that it can be downloaded fast in the browser.

Bundling:

• In Bundling, all the js files within the application are downloaded as a single unit instead of downloading each js file which overall reduces the overall application downloading time hence achieving greater performance.
• Let’s take an example to understand it:
  Suppose my application has three js files within my application. So when the application is deployed, the Angular framework by default all these three js files into one file thus reducing the size of the application and it now downloads fast within the user browser.

Minification: In minification process following things are done within the js file to reduce the size of the js file for faster downloading.

• It removes all the white spaces within the file.
• It removes all the unwanted variables within the file.
• It converts all the big variable names to the smaller variable names.

By doing all these things, the Angular framework reduces the overall size of the js file. Also, the Angular framework adds .min to the file name to indicate the minification of that particular file.

Let’s take an example to understand the minification process better.

module.js:

Javascript

module.exports = function(module) {
    if (!module.webpackPolyfill) {
        module.deprecate = function() {};
        module.paths = [];

        // module.parent = undefined by default
        if (!module.children) module.children = [];
        Object.defineProperty(module, "loaded", {
            enumerable: true,
            get: function() {
                return module.l;
            }
        });
        Object.defineProperty(module, "id", {
            enumerable: true,
            get: function() {
                return module.i;
            }
        });
        module.webpackPolyfill = 1;
    }
    return module;
};

Minified code by the Angular framework when you run ng build –prod is:

module.min.js:

Javascript

module.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e};

So, as you can see in the minified version, all the white spaces are removed, the variables name got shortened. Hence, reducing the code to only one line code decreases the overall size of the js file and application.

So, minification and bundling are actually interrelated processes that help to reduce the size of the js file to get downloaded faster in the browser and giving a pleasant experience to the user. These are the basic pillar of the Angular framework when it comes to increasing the overall performance of the application.