Home » Software Development » Improve your Angular 1.x startup time

About Juri Strumpflohner

Juri Strumpflohner

Improve your Angular 1.x startup time

This neat and simple trick originally appeared about a year ago on this blog post, so it’s not something I came up with by myself.

Angular’s watcher functions for ng-bind and text nodes () put binding information inside the respective DOM elements using jQuery .data method. This is unfortunately a very expensive operation that impacts both load times and time taken to delete nodes. Fortunately this information is not used in actual binding and is mostly for debugging purposes.

Note, this can be used starting from Angular 1.3+ onwards.

I first discovered it in Swimlane’s Angular 1 SystemJS seed project. The trick basically consists in disabling the debug information on the $logProvider as well as $compileProvider through dedicated function calls. That could look like this:

angular
  .module('myApp', [])
  .config(function($logProvider, $compileProvider) {

    if (window.prod) {
      $logProvider.debugEnabled(false);
      $compileProvider.debugInfoEnabled(false);
    }

  });

Now you may ask yourself, where does window.prod come from? Well that’s basically something you have to set during your production build. Frankly, it could be as simple as

<!doctype html>
<html>
  ...
  <script>
    window.prod = true;
  </script>
</html>

Obviously you may want to automate this through your build configuration, like to inject it right in the beginning of your main application script.

In a RequireJS Grunt task that might look like…

...
  requirejs: {
    dist: {
      options: {
        ...
        wrap: {
          start: '(function() { window.prod = true; })();'
        }
      }
    }
 }

..or as the guys from Swimlane did in their Gulp configuration

...
 return gulp.src('dist/app/app.js')
    .pipe(insert.prepend("window.prod = true;\n"))
    .pipe(insert.prepend(cacheBust))
    .pipe(gulp.dest('dist/app'));
...

It is a nice and easy to add performance booster that can be added without any major effort.

Reference: Improve your Angular 1.x startup time from our NCG partner Juri Strumpflohner at the Juri Strumpflohner’s TechBlog blog.
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a sysadmin Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Introduction to NGINX
2. Apache HTTP Server Cookbook
3. VirtualBox Essentials
4. Nagios Monitoring Cookbook
5. Linux BASH Programming Cookbook
6. Postgresql Database Tutorial
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of