Optimize your angular 1.x apps for production

This post explains the concept of production mode available in AngularJs.

What is production mode?

By default, Angular runs in development mode and attaches debug information about bindings and scopes to the DOM.

You have probably seen those ng-scope and ng-isolated-scope CSS classes while inspecting elements.
Well, this is a great example of debug info being attached to DOM nodes.

You can read more about it on the official docs.

Why should you care?

Those debug information are made available for you to easily debug your app especially using tools such as Batarang. However, angular runs perfrectly fine without them and you don't really need that in production.

Enabling production mode will give your app a performance boost since Angular is no longer concerned with publishing and updating those information.

Show me the code!

You can easily enable production mode (AKA disable debug info) with the below code.

app.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

How can I debug on production?

We all want our apps to run as fast as possible on production. But one day, you might need to debug things on production. It's still possible!
Just open your JavaScript console and execute the following:

angular.reloadWithDebugInfo();

This will reload the page & angular into debug mode giving you access to the debug info you are looking for!

Interested in scaling large angular apps? Don't miss my talk at NDC Oslo.