Improving Ionic app launch times

February 10, 2017, 11:12 am Categories:

Categories

** UPDATED TO IONIC 3 **

After upgrading to the latest version of Ionic you might experience slower loading times for both iOS and Android platforms.

For example, when I tested an app currently in development these were the results:

Device OS Launch time
iPhone 5C iOS 9.3 6 seconds
Galaxy S4 Mini Android 4.1.1 10 seconds

Ouch!

That would NOT make for a good user experience, particularly on Android.

So what's going on here? Why is the application so slow to launch with the latest version of Ionic?

A little prod in the right direction

By default ALL Ionic application builds are now non-AoT (since ionic-app-scripts v 0.0.47), which means that they are always treated as being in a state of development.

AoT, short for Ahead-of-Time, is a build process which pre-compiles templates and minifies JS so as to improve the performance of an application at runtime. As the underlying compiler is run only once during build time, instead of being called in the browser during the running of the application, launch times are decreased and component rendering is faster as a result.

Exactly what we want right?

Unfortunately we don't get that by default which explains why our applications can be slow to launch.

Thankfully enabling this is both simple and straightforward - just add the --prod flag during any of the following CLI commands:

// If iOS
ionic emulate ios --prod
ionic build ios --prod
ionic run ios --prod


// If Android
ionic emulate android --prod
ionic build android --prod
ionic run android --prod

Pretty painless huh?

After adding the --prod flag (notice that it's TWO hyphens NOT one?) to my build process the app launch times were as follows:

Device OS Launch time
iPhone 5C iOS 9.3 2 - 2.5 seconds
Galaxy S4 Mini Android 4.1.1 3 seconds

Now that's more like it!

Launching the app on iOS was significantly faster and felt quite snappy but look at the improvement in the Android launch time. That's been reduced by 7 seconds which is a massive improvement.

Incredible the difference that AoT makes isn't it? And all thanks to one simple little flag added to the end of a CLI build instruction.

Let's say though that we only wanted to compile the templates without the JS minification (we might, for example, do this for the purpose of being able to debug the source code in the browser).

We could accomplish this by adding the --aot flag to any of the following CLI commands:

// If iOS
ionic emulate ios --aot
ionic run ios --aot


// If Android
ionic emulate android --aot
ionic run android --aot

By adding this flag you would end up with an application build that still benefits from Ahead-of-Time compiling but does away with JS minification.

What you choose depends on what you need to accomplish at a given moment in the development cycle.

That's what I love about developing with Ionic - its versatility.

In summary

AoT makes a massive difference to the performance of our Ionic applications as evidenced from the above comparison between launch times for non-AoT and AoT enabled builds.

The Ionic team have stated that making applications non-AoT by default allows for a better development experience. Unfortunately, for those newcomers to developing with Ionic, they might not realise why their applications are so slow to launch.

This makes the software look sluggish and under-performing which isn't an attractive sell when pitching to clients for business use.

Added to which the current lack of prominent documentation detailing the use of the --prod flag to enable AoT builds doesn't help matters any.

Hopefully this short tutorial will help any developers out there struggling with this "problem".

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for further information about troubleshooting Ionic errors.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top