軽快に動くはずのIonicアプリが遅い。これはなぜだ？！？！というときにチェックしてほしい項目をご紹介します。「Cordovaだから遅いんだ！！」「ネイティブじゃないとだめだ！！」と思考停止する前にご確認いただけましたら幸いです。

この記事は、Ionic Advent Calendar 2018の記事です。思いついたら追記していきます。また、「これも遅くなる要因じゃない？」というのありましたらコメントにてご教示いただけましたら幸いです。

1. エミュレータで確認している

XcodeやAndroid Studioのエミュレータでは、動作自体を確認することはできますが、挙動は実用的ではありません。

なぜこんなに遅いの？！？！と驚くほど遅いので、操作性の確認をする時は必ず実機でご確認ください。あわせて、Ionicは、デバイスでリアルタイム確認するためのionic DevAppがありますので、そちらの利用をご検討ください。

2. AOTビルドしていない

といっても、ionic DevAppは本番ほど速くはありません。
Ionicでは、本番用ビルドは --prod をつける必要があります。詳しく知りたい方は、Angular AoTガイドをご覧ください。

ionic cordova build [device] だけでビルドしてる場合、JITビルドになっています。本番同様の速度を確認したい場合、AOTビルドしてからデバイスを接続してご確認ください。

(click)イベントは、クリック可能な要素（<button>など）では問題ありませんが、それ以外の要素で利用すると、300ms遅延することがあります。これは、シングルタップかダブルタップかをデバイスが判定待ちするためです。

判定待ちを削除するために、Ionicではtappableというディレクティブを用意しています。<div>などに(click)イベントをつける場合は必ずご利用ください。

 <div tappable (click)="doClick()">I am clickable!</div>

WKWebviewをお使いください。2018年になってからプロジェクトを作成した方はデフォルトがWKWebviewになってるので問題ありませんが、2017年以前にプロジェクトを作成した方は念のために確認しておいた方がいいです。

不具合も多いUIWebViewからはさよならしましょう。

これはCordovaだと関係ないかもしれません。が、PageをLazyLoadingしていると、遷移毎に遷移先のページを読み込むことになるので、preLoadingしてる方が精神衛生的にいいかと思います。

app.module.ts

IonicModule.forRoot(MyApp, {
  preloadModules: true
})

イベントリスナー立てまくってるとか、Observableのunsubscribe漏れとか、重い処理を走らせてるとか、起動時に不要なAPIを叩きにいってるとか、メモリ上に膨大なデータを保持してるとか（Redux的に）。

WebViewなので（しかもファイルはローカルにある！）、Webで表示する以上に遅い場合は必ず設定漏れや何かの要因があります。「Ionicが遅い」「Cordovaが遅い」という前に、自分が書いたコードを見直していただけましたら幸いです。
Webをもっと信じよう。

それでは、また。