Optimize Ionic 2 App for Production

Native apps, in general, are fast. Hybrid mobile apps, well, not very great in terms of speed, at least as it is popularly known to be choppy and laggy. If you use Ionic 2 for building cross-platform mobile apps, you might wanna take note of these tips that will help you optimize Ionic 2 App for production.

Users care about performance and speed in their app usage, and when that expectation isn’t met, even in the slightest possible way, it looks bad.

Below, we consider two ways to improve speed and performance, as well as reduce the APK size.

Before then, a short story!

Storytime

In the past, my Ionic app would take about 10 to 15 seconds to load, even on a good performance phone. The file size too, relatively ridiculous in weight.

End of Story

Here we go then!

Enable Angular Production

If your project is arranged by default as Ionic start does it, then look in your project directory, the app/main.ts file. Please replace with this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';

import { AppModule } from './app.module';

// this is the magic wand
enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);

By enabling Angular for production mode, you stand the chance of seeing the device ready event fire way earlier. By simply enabling Angular production, I got about 65 to 70% cut down on seconds it takes for device ready to fire.

There’s a reason Angular notifies you in browser console to that you don’t have the production enabled. If it wouldn’t impact your app positively, I doubt that notification will be there.

According to the docs:

“Disable Angular’s development mode, which turns off assertions and other checks within the framework.”

Make sure to have production mode on when going production, to make your app run even crispier, cutting down all the development mode checks that happen.

Enabling angular production mode also cut the app size into almost half – yes, about 50% size reduction. You don’t wanna leave production mode turned off when you actually go production.

Optimize Your Ionic App

Here are the two steps I take to make things work a bit faster in terms of app usage.

Change (click) to (tap)

NOTE: This part isn’t necessary if you use the (click) within the button tag in Ionic 2.

“… we do remove the delay on button and a elements.” – See forum for details

So a (click) on a button and or a tag doesn’t have the 300ms delay. But on other tags like a div, the 300ms still happens.

Ionic 2 apps run within a WebView, which is a more or less like a browser. Browsers were designed to interpret a click event in a way that makes sense for what it was intended for, however in the mobile world, that’s useless.

A click event triggers after the browser waits roughly for about 300ms to ensure the user doesn’t intend to do a double-click instead.

That wait time is just added to allow the browser actually determine what the user wishes to do, either just a mere click or a double-click.

If a double-click, it is likely a user wanting the effect of a double-click will click twice within a short span or roughly about 300ms.

In the mobile world, we don’t click, unless you tether your USB mouse to your Android phone (even with that, the mouse events will be translated to taps and long-tap, and won’t go as a ‘click’ in the PC world – I guess??)

Although 300ms looks like a very short time when you compare to a second, don’t be deceived. In today’s world of apps, even 10ms saved is priceless.

Thus, Angular 2 (and Ionic 2 too since it is just Angular 2 more mobilized!), you’re able to only target the tap event which lacks the 300ms lag time.

In short, change all (click) triggers to (tap). And yes, no errors will be thrown no you don’t have to change anything. Now in mobile, things will run slightly crispier. Depending on your app, this change might be significant or negligible.

In mine, although not a huge app – standard CRUD with localStorage – doing this change made tap to response instant.

Build with --prod flag

Here: ionic build android --prod --release

If you’re ready to push to Play Store, use the above build command. The --prod flag ‘do all’!

I notice a significant reduction in file size with the --prod flag on, about 30%.

That’s it. More info about the production flag I learn is buried somewhere in the app-scripts file on Github.

Left to me alone, that’s the first thing that’ll show up on the Ionic homepage before anything else. Because I doubt how many Ionic developers know that flag and or use it, not because they wouldn’t wanna use it, but likely because they’ve never heard of it.

Well, so now you know, use it.

Conclusion

I’ll be adding more optimization tips as and when I come across any in the vast documentation of Ionic 2. Downloaded the Ionic-site documentation repo the other day, (was it 1.4 Gig in size?), and I keep coming across something new every time.

I hope you enjoyed this one, will see you in the next one.