Boost your Angularjs Application via Minification of Angularjs Module

Minifying the angularjs files to smaller size leads to boosting up of your application speed. You can load minified files of all  your modules together, which makes it easier to setup your application. This quick solution can help to improve your Angularjs application’s performance when you minify it.

Best practices of minification
Here, I would like to introduce a grunt tool which is a great tool for automating many features in our application. From minifying files, processing LESS, linting our JS files and much more.

Grunt is an easier, efficient tool that  watches our Node server for changes, process those changes/run tasks, and keep restarting our server. We don’t have to run separate Grunt and node (or nodemon) commands.

Minification process
One of the techniques a JavaScript minifier will use to reduce the amount of code sent to the client is to change the names of local variables and parameters to be as small as possible. A parameter named “$http” might come out of a minifier with the name “n” to save at least 4 bytes.The basic workflow is to concatenate all the angular scripts into one file.

Before minification

angular.module("testmodule").controller("TestController", TestController);    TestController.$inject = ["$scope", "$http", "$q"];    function TestController($scope, $http, $q) {        // ...    }

After Minification

!function(){function o(o){o.test={companions:["Frodo","Sam","Merry", "Pippin","Gandalf","Aragorn","Legolas","Gimli","Boromir"]}} angular.module("testmodule").controller("TestController",o)}();

Benefits of Minification
Minification is the process of whitespace and other nonessential characters like comments so that the code becomes valid. While JavaScript minifiers will shorten identifiers where possible, they won’t modify any string literals in your code. The idea is to provide the dependency names as a separate array of strings which will survive the minification process. Minification is performed on Javascript source code because it is essentially a performance enhancement – and it allows websites that use minified Javascript to load faster.

Also, when we are comparing with compressed code would have to be uncompressed first before execution. Minified code is still valid code in all respects and can be run immediately.

Solutions to Angularjs Minification

1. Explicitly Inject Dependencies
Angular’s dependency injector provides services to your controller when the controller is being constructed. The dependency injector also takes care of creating any transitive dependencies the service may have (services often depend upon other services).

$inject property on controllers.

var app = angular.module(Test, []); app.controller('testController', function($scope) {    $scope.testmessage = 'demo';   }); testController.$inject = ['$scope'];

2. ng-annotate

Minification of files should occur only after the correct alignment of coding standard. This can be included in our code by using the ng-annotate method. As a result of this, standard process can get an exact minified file for the good execution of the application

ng-annotate adds and removes AngularJS dependency injection annotations. It is non-intrusive so your source code stays exactly the same otherwise. No lost comments or moved lines. Annotations are useful because with them you’re able to minify your source code using your favorite JS minifier

Code without annotations

angular.module("Test").controller("TestCtrl", function($scope, $timeout) { });

Here, the code  is not aligned in proper manner and thus it will show an error on minifying the above file. If we are using the ng-annotate method, it  will make the code to the following format.

Run ng-annotate – later sent to the minifier

angular.module("Test").controller("TestCtrl", ["$scope", "$timeout", function($scope, $timeout) { }]);

Error Identification In Minified files
Error identification is one of the difficult tasks after minification of angular files. To prevent this problem, we modified our JavaScript unit test Karma configuration. Karma runner separately to detect a difference between concatenated and minified code.

Minification of files in angular leads to the proper and efficient execution of application, and we can ignore the error which may occur during the inefficient execution of server.it is best practices when working with client code. Start with this in the beginning, finding problems when you have a lot of code is even more difficult.

Know More About This Topic from our Techies