Angular Best Practice : Lazyload vs Concatenation

Question

I have built many angular applications, and each time I try to improve app performance , architecture .. etc.

One strategy some people follow is to concatenate all JavaScript files in one minified file, and also all stylesheet files in one minified file, this however opposes with lazyload concept, for example angular oc lazyload loads state files in this manner:

//inject dependency
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

//load file
myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

The question is which pattern will provide better performance concatenation or lazy loading ?

Answer 1

Depends on your application size. If it's small - it will be enough to concatenate all js files into single one, and minify it. If you have large modular application, there is a chance that some percentage of your users won't visit all modules, in this case it's better to split your single js file into some chunks, and lazy load it when needed.

Answer 2

The answer for this depends on application that your are building. but I will explain you the Differences so it can help you to make a decision.

Advantages of concatenate in to a single file

1. It will definitely improve your app speed(except for the first time later you will get the cache benefit)
2. It will reduce the number of requests to your server or the static server where your static resources are hosted.

Advantages of lazy loading

1. Initial page load will be faster compared previous but there will be a delay while the user using your app because you will be loading the resource on demand (this may not feel good for user experience for some types of applications).
2. Will help you to reduce the number of requests to your server initially but as the app is being used by users it has to download all your resource one by one.

So finally I prefer the First option.

Hope this helps you :)