** 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:
|iPhone 5C||iOS 9.3||6 seconds|
|Galaxy S4 Mini||Android 4.1.1||10 seconds|
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:
|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.
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.