Optimizing Performance in AngularJs Applications for Production

1 minute read

Published:

If you still maintain an Angular 1.x Application, here’s a not so well-known trick to help speed up performance.

In your Angular Configuration, you’ll typically have a config function to setup whatever you need at runtime in a factory/service/etc.

(function () {

    'use strict';

    angular
        .module('myApp')
        .config(config)
        .run(run);
  

    /* ngInject */
    function config($httpProvider) {
        //your config code here
    }

    /* ngInject */
    function run(configFactory, $rootScope, $window, $location, $localStorage) {
        //your runtime config code here
    }

})();

When developing an app that needed to squeeze every bit of performance out of the code, I found this hidden gem on the AngularJs Documentation Site. Basically it turns off debugging in production environments and doesn’t include a bunch of junk in the html you dont need.

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

I typically like to break my re-usable functions into factories when working in Angular 1.x. So my setup would look something like the following. With this setup, you’ll have to provide the compile provider as a constant as shown below. This lets you use the compile provider in a custom factory.

(function () {

	'use strict';

	angular
	    .module('myApp')
	    .config(config)
	    .run(run);


	/* ngInject */
	function config($provide, $compileProvider, $httpProvider) {
            //Other ommitted Intel Specific Code :)  
            $httpProvider.defaults.withCredentials = true;
        
            $provide.constant('$compileProvider', $compileProvider);
	}


	/* ngInject */
	function run(configFactory, $rootScope) {

	    configFactory.registerServiceWorker();

            configFactory.setCompileTimeSettings();
        
            configFactory.triggerLoadingScreen();

            //Default to blank route on refresh
            var defaultToHome = $rootScope.$on("$locationChangeStart", function(event, next, current){
                if(next === current){
                    $location.url("/")
                }
            });
        }
})();

Then the Config Factory would look something like this with all your configurations split out into their own functions.

(function () {
	'use strict';

	angular
	    .module('myApp')
	    .factory('configFactory', configFactory);


	/* @ngInject */
	function configFactory($compileProvider) {

		var config = 'Intel specific code again :)';
		var loadingScreen = {};


		return {
			registerServiceWorker: registerServiceWorker,
			setCompileTimeSettings: setCompileTimeSettings,
			triggerLoadingScreen: triggerLoadingScreen,
			turnOffLoadingScreen: turnOffLoadingScreen
		};


		function registerServiceWorker() {
			if(config.Environment !== "Local") {
				if ('serviceWorker' in navigator) {
					navigator.serviceWorker
						.register('./service-worker.js')
						.then(function() {
							console.log('Service Worker Registered');
						});
				}
			}
		}


		function setCompileTimeSettings() {
                    $compileProvider.debugInfoEnabled(false);
		}


		function triggerLoadingScreen() {
			loadingScreen = pleaseWait({
				logo: " ",
				backgroundColor: '#fff',
				loadingHtml: "<loading-screen></loading-screen>"
			});
		}


		function turnOffLoadingScreen() {
			loadingScreen.finish();
		}

	}
})();