Optimizing Performance in AngularJs Applications for Production
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();
}
}
})();