AngularJS Lazy Loading with ocLazyLoad and UI Router
Lazy Loading is more popular everyday. With external libraries we can use it even in older frameworks, like AngularJS. We need ocLazyLoad — it works well with UI Router library.
Prerequisites
Before we dive into code with Lazy Loading usage, let’s look on some base ideas behind it and core libraries we need to implement it.
Lazy Loading
Lazy loading is a technique which allows us to deferre loading unneeded resources. For scripts, one of the most popular technique is dividing files by route. For example, route for login page loads only scripts needed for login, articles route loads only scripts needed for articles etc. Lazy Loading scripts makes application application much more faster from user perspective — javascript needs to be loaded, parsed and compiled. As a user, I would rather wait for every page load few hundred miliseconds that wait over a dozen seconds to see login page — and that is how it looks on slower mobile devices.
ocLazyLoad
ocLazyLoad is simple library which gives a possibility to load scripts asynchronously.
Implementation
Wait a minute, should I even care? AngularJS is dead.
One the one hand, you are right. AngularJS started long time support and eventually will be closed. On the other, AngularJS is used in so many projects. Huge amount of them won’t be rewritten to newer framework. Lazy Loading will give a second youth to that projects, making them much faster, and therefore, more competetive.
Problem is especially visible on mobile devices. Please read great article “The cost of JS” by Chrome performance engineer, Addy Osmani:
This article turn upside down my knowledge about measuring JS performance.
A good supplement would be Addy’s speech:
Starting point
For the purposes of this article, I made a github repo:
It’s very simple application which uses OpenWeatherMap API:
In commit 6e79edb0d79c87e4ef5617d97b12c5fd05e103e2 you can find an index file written in old good way, without lazy loading:
What does the loading of this file looks like? Let’s check in Chrome Dev Tools:
It’s very simple application with just 2 views, but needs 21 requests to transfer 668 KB. It’s easy to imagine how it looks like in big projects, Hundrets of requests to load many megabytes if data. Of course for production code will be minified to one/few files, but still all resources needs to be loaded on start. It’s unnecessary to download everything at start when user needs only part of resources. How to change that?
Lazy loading with ocLazyLoad
First, we need to add ocLazyLoad to package.json:
Then, in our case, add it to index.html. How to use it with UI Router? We need to add configuration files for modules (look at the bottom of page):
For sake of simplicity, I put 2 configuration files in one file. Of course files can be loaded explicitly but I can encourage you to use configuration files — it makes loading more readable and separated from other code.
Now modules are ready to load. In our case, loading happens in route config with $ocLazyLoad service:
Where modules Days and DaysDetails are loaded. How we now is it working? When start page is loaded, loading for Days module was initiated by ocLazyLoad:
And when we click Go to details button:
We can see that dependencies from DaysDetails are loaded:
Of course files from modules are not needed in index.html:
Which makes it much more smaller.
Conclusion
It’s easy to imagine how much lazy loading can improve user experience in big projects. Instead of loading everything at once, where even minified files can weigh megabytes, it gives us opportunity to load files only when needed. It also works great with aggresive caching — you don’t need to uncache everything when deploy new version, just changed files. I am happy that lazy loading can be easily applied even with quite old framework like AngularJS.
