Skip to content

Optimize Ionic 2 App for Production

Posted in Javascript

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:

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.

  • Markus Müller

    The 300ms delay is automatically removed on (click) if it is called on a button or an a tag. See this forum post https://forum.ionicframework.com/t/using-fastclick-js-to-remove-300ms-delay/43384/6

    Where did you get the info about the prod option? There’s no mention of it in the Ionic sources or the spec. I haven’t found it in the cordova docs, too

    • Thanks for pointing out the 300ms. Didn’t find that in my readings. Will update article accordingly.

      About the –prod, sorry, I had the link in hand and forgot to include in the article. Here’s the link: https://github.com/driftyco/ionic-app-scripts/blob/master/README.md#all-available-tasks

      Updated article with link too.

      • Akshay Kumar

        can you please tell me where i have to add the enableProMode …. i am using ionic 2 latest version

        • I think I mentioned that in the article, right?

          • Akshay Kumar

            But there is no main.ts in my project…
            I have main.component.ts or main.module.ts
            That’s why I asked. I am sorry if I missed something.

          • I don’t think I can help you because you’re doing something wrong.

            This is my system info:

            Mine, when I create a new project, ionic start myProject –v2, I see my main.ts. If you don’t get to see yours, you’re making a mistake somewhere, a mistake I don’t think I can help you.

            You’re doing something wrong, just look for it. Everyone has a main.ts file.

          • Luciano Guillermo Fantuzzi

            He is not doing anything wrong. You are just out of date with Ionic 2. main.ts was in Ionic 2 beta, but since rc1 and now the stable versions (plus Ionic 3) this is no longer valid anymore. And for the records, Angular production mode is enabled by default in current Ionic versions, even in Ionic 2 stable.

          • mukul sharma

            you will find it in app folder

  • Padmini Beera

    i have followed the steps as you mentioned my build time became fast. but when i run in the device there is no change in device ready time.my app is loading after 13 sec.i have checked the timeline(In chrome browser) GC is taking aroung 379 ms. Is that making problem to load my app.Please help me.

    • What device is it?

      • Padmini Beera

        android 6.1.1
        my ionic version
        Cordova CLI: 6.5.0
        Ionic Framework Version: 2.0.0-rc.3
        Ionic CLI Version: 2.2.1
        Ionic App Lib Version: 2.2.0
        Ionic App Scripts Version: 1.1.4
        ios-deploy version: 1.9.1
        ios-sim version: 5.0.13
        OS: OS X El Capitan
        Node Version: v7.4.0
        Xcode version: Xcode 8.2 Build version 8C23

  • Neomi Bushary

    Wooow this one line makes so much difference. Thank u so much!!!!!

  • Kimpav Heng

    Work great!!!! Thank you so much!!!!

  • driekwartappel

    Enable prod mode is automatically handled by running in –prod mode:
    https://forum.ionicframework.com/t/is-enableprodmode-necessary/87525/9

  • Max Shell

    try using –aot and –prod