The 4 Stages of Perf Tuning for your Angular2 App

tl;dr

The 4 stages of performance tuning your Angular2 App

Angular2 was built from the ground up with the primary goal of being fast and performant. While being fast right out of the box, the performance of Angular apps can be further enhanced really supercharge your app. These performance enhancements can be see as a pyramid where each level improves a certain performance metric.

Let’s look at each of these and how do they go about improving your app’s performance.

1. Ahead of Time (AoT) compilation and Tree Shake

To compile your app using AoT you would use the ngc compiler that will convert your component, HTML templates and the CSS into a chunk of code that Angular bootstrap can directly render without having to compile it in real time like the way it currently does.

Using the AoT compiler can help cut down your bundle size by over 50% and improve first paint by over 45%.

This is mainly due to the fact that the JIT compiler (which is ~50% size of the Angular library) is no longer needed with AoT.

Tree Shake

As it turns out Tree Shake is different from dead code elimination.

This process depends on ES2015 modules. One can use the Rollup.js or Google Closure Compiler to carry out tree shake of the AoT compiled code to further drop your bundle size.

You can achieve close to 2.5x reduction in your bundle size using AoT and Tree Shake.

Here is a nice and easy to follow cookbook on performing AoT and Treeshake for your angular app.

2. Angular Universal

Using Universal helps improve the rendering performance for first time visitors as the first view is generated by the server as soon as a page is requested and the angular client size library downloads in the background.

One of the challenges of Universally rendered or hydrated apps is the problem of the Uncanny Valley.

Angular Universal tries to solve this problem a small library called preboot.js which tries to solve the problem of the uncanny valley by recording and replaying the events when while the user is in the ‘uncanny valley’ zone. Once the client side app has bootstrapped the state is seamlessly transferred to the clientside.

3. Web Workers

Angular allows us to run the entire application in a web worker and communicate with the frontend using MessageBrokers.

4. Service Workers & PWA

The Progressive Web App is essentially a collection of a couple of principles and guidelines that allow for an enhanced user experience on mobile device. Angular apps can be easily converted into a PWA by mapping each of these PWA guidelines to an Angular feature as described below.

Using Service workers and the App Shell model you can get your first render times to under 200 ms.

Summarizing

  1. Universal Rendering: Again something that should be done for most applications however they become predominantly important when you have a lot of first time users, where SEO is crucial and where people generally share a lot of your content on social media.
  2. Web Workers: In case you are building large dashboard with lots of number crunching and data visualization happening in your Angular app, resort to using Web workers to ensure that users are able to continue interacting with our app while the data is being computed.
  3. Service Workers: When building a mobile first app, which needs to support things like instant loading, offline support and running in full screen mode.

Sr. Director eXperience Technologies SapientRazorfish. Google Developer Expert. Author of AngularJS Web Applications Development Blueprints

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store