juri.dev

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 ({{expression}}) 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 :smiley:.

Juri Strumpflohner

Improve your Angular 1.x startup time