軽快に動くはずの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ビルドしてからデバイスを接続してご確認ください。
#3. タップできない要素にクリックイベントをつけている
(click)
イベントは、クリック可能な要素(<button>
など)では問題ありませんが、それ以外の要素で利用すると、300ms遅延することがあります。これは、シングルタップかダブルタップかをデバイスが判定待ちするためです。
判定待ちを削除するために、Ionicではtappable
というディレクティブを用意しています。<div>
などに(click)
イベントをつける場合は必ずご利用ください。
<div tappable (click)="doClick()">I am clickable!</div>
#4. UIWebViewを使ってる(iOS)
WKWebview
をお使いください。2018年になってからプロジェクトを作成した方はデフォルトがWKWebview
になってるので問題ありませんが、2017年以前にプロジェクトを作成した方は念のために確認しておいた方がいいです。
不具合も多いUIWebViewからはさよならしましょう。
#5. LazyLoadingなのに、preLoadingしていない
これはCordovaだと関係ないかもしれません。が、PageをLazyLoadingしていると、遷移毎に遷移先のページを読み込むことになるので、preLoadingしてる方が精神衛生的にいいかと思います。
IonicModule.forRoot(MyApp, {
preloadModules: true
})
#6. 遅くなる処理を入れてる
イベントリスナー立てまくってるとか、Observableのunsubscribe漏れとか、重い処理を走らせてるとか、起動時に不要なAPIを叩きにいってるとか、メモリ上に膨大なデータを保持してるとか(Redux的に)。
#まとめ
WebViewなので(しかもファイルはローカルにある!)、Webで表示する以上に遅い場合は必ず設定漏れや何かの要因があります。「Ionicが遅い」「Cordovaが遅い」という前に、自分が書いたコードを見直していただけましたら幸いです。
Webをもっと信じよう。
それでは、また。