The 4 Stages of Perf Tuning for your Angular2 App

tl;dr

Image for post
Image for post
The 4 stages of performance tuning your Angular2 App

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

AoT is one of coolest feature of Angular2 that differentiates it from other frameworks and also the one that gives you the biggest performance boost.

Tree Shake

Tree shake is the process of removing unused modules and code from your app before it is finally bundled and minified.

2. Angular Universal

Angular Universal allows you to run your Angular App on the server.

3. Web Workers

Web Workers are great to offload your CPU intensive tasks to an independent web worker thread so that the frontend UI is not frozen or Janky when the app is fetching and processing large amounts of data.

Image for post
Image for post

4. Service Workers & PWA

Service workers offer instant loading and offline capabilities for your application. Adding a service worker and a web app manifest file to application is very easy using Angular CLI. All you need to do is pass the — mobile flag and Angular CLI will automatically add the service worker and the manifest file to the application it builds.

Image for post
Image for post

Summarizing

  1. Ahead of Time (AoT) +Tree Shake: This should be done for much most of your application there is no real reason why you shouldn’t be doing it.
  2. 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.
  3. 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.
  4. Service Workers: When building a mobile first app, which needs to support things like instant loading, offline support and running in full screen mode.

Written by

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