Load faster: Convert your existing yeoman based AngularJS 1.x application to lazy load

In this blog entry I have attempted to show you how to convert AngularJS yeoman based Single Page Application (SPA) to lazy load or download file on demand with minor modifications to code.


Why I chose to write?

While working on a SaaS app bookingjoe.com, I was faced with a challenge where the first page, which included large minified JS file, was taking time to load. I tried out several approaches.

  1. AngularJS with RequireJS: There are many generators available on the web to use RequireJS with AngularJS but they do not solve issue of on-demand loading & downloading of AngularJS modules and components registering problem. AngularJS does not allow registration of modules and components after initial bootstrapping of angular app and so RequireJS could only load javascript files but it could not register new angular modules and components on demand. Also after using RequireJS, the main.js file grows to  ~500kb. This didn’t work.
  2. AngularJS with ocLazyLoad (https://github.com/ocombe/ocLazyLoad): My requirement was to load first page quickly and load the remaining JS files on demand. I found OCLazyLoad bower component was addressing this problem. It was also light weight. OCLazyLoad registers the modules and components with AngularJS dynamically.

I was still mulling over it but was finally convinced when I read the following thread on stack overflow:
Hat tip to Olive for pointing me in the right direction. Armed with this knowledge, I experimented converting Yeoman based AngularJS project to lazy load it’s components. Since my problem was conversion of existing application to lazy load it’s modules, I created a fresh AngularJS project using Yeoman generator and applied my changes to the generated file.

What I did…

  1. Added a reference of ocLayzLoad and updated JS files reference to load on demand from app.js or .html file of their views.
  2. Updated Gruntfile to uglyfy, renamed file name and updated references in the final .html or .js file.

So let’s see how I did it…

  1. Created a new Yeoman AngularJS project After creating fresh project, I created 2 more controllers (about.js, contact.js) and 2 services (helloservice.js, contactservice.js).
  2. Added ocLazyLoad and update references of JS files into index.html.
    First install the ocLazyLoad bower component Quick tip: Need to move “oclazyload: 1.0.9” line in bower.json to “dependencies” section.

    Now load the module ‘oc.lazyLoad’ in application. Update app.js file.

    To load controller and services js files dynamically, remove their references from index.html. I also needed to update app.js file to remove controller’s name from route entry. Now my app.js route looked like

    Now there are two ways to load controllers and services dynamically.

    1. Load JS file by adding reference of JS in .html file
      I added controller and services reference in html view. Here I added required controllers and services js details in about.html. I also provided about.js and helloservie.js file path in html tag “oc-lazy-load”. Quick tip: ng-controller must come one level below file loading of JS files, because the inner dom will not compile until oc-lazy-load loads specified file and registers modules and components (if required).
    2. Reference of JS in app.js file(contact.html, app.js)
      With $ocLazyLoadProvider (app.js), I created list of modules in app.js and specified associated list of files to be loaded with each module. These module definitions do not download file during declaration. They will be downloaded with view loading. After adding modules and their dependencies in app.js, I updated html file to use these modules. I also updated the contact.html.
  3. Updated Gruntfile.js to Copy and Uglyfy JS files in final build
    To avoid loading of controllers and services JS with first page load, I removed references of those JS from index.html. This will create another problem in build. The final build will not have those JS files. I needed to update COPY block in Gruntfile.js to copy remaining controllers and services JS. Quick tip: It is required that all JS files except app.js should be in their respective folders.

    Module “filerev” changes JS file name based on hash value(shasum) of file content. When JS files are part of index.html, this operation is done on final minified and concatenated JS file. But here JS files are referred from different JS (app.js) and HTML files. To solve this problem, I updated “usemin” section of Grunt.

    Final step in Gruntfile.js is minification and uglification. I updated uglify section (which was commented in original project) to uglify separate JS files.

    Quick tip:  Uglification changes AngularJS variables and injects service variable names. So here one has to map the injection of services to it’s variable manually.

There still remained some challenges with ocLazyLoad reference resolutions. I had to solve those issues individually. I am now convinced many Single Page Applications (SPA) can benefit from this enhancement. Would welcome your queries and suggestions. I will be happy to respond.

Source Code https://github.com/dhirenrouterabbit/angular-yeoman-oclazyload[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]