この記事は Ionic Advent Calendar 2019 20日目の記事です。

Ionic with Zone.js

この記事は前日のMeetupで発表したものです。

Ionic4 + Zone.js 0.9.1 でのパフォーマンス低下

Ionic4 (Angular)でZone.js 0.9.0から0.9.1にアップグレードしたあとで、動きが遅くなりました。調査したところ、Change Detectionの回数が多くなっていたことがわかりました。その理由を説明させていただきます。

Ionic 4 の仕組み

Ionicはバージョン４からStencilを利用して、すべてがWebComponentになりました。

そして、Zone.jsは0.9.1からWebComponentのAPIを全部monkey patchしました。下記のようなイメージです。

その結果、WebComponentがangular zoneに自動的に入りました。このPatchはWebComponent用ですが、Angular Application用ではありません。

しかし、Ionicの場合、すべてのComponentはWebComponentであると同時に、普通のAngular Applicationでもあります。つまり、IonicのComponentが普通のAngular ApplicationのComponentとしてラップされているため、すでにangular zoneの中に入っています。

その結果、なにかInputが変更する場合、

Angular ApplicationによるAngular ZoneのChange Detection
Zone.js PatchされたCustom Elements APIのChange Detection

両方がTriggerされ、パフォーマンスが低下します。

解決案

解決方法はZone.jsのPatchを無効化することです。

やりかたとしては、一つのzone-flag.tsをつくって、

zone-flag.ts

(window as any).__Zone_disable_customElements = true;

をいれます。

そして、polyfilles.tsに

polyfilles.ts

import './zone-flag';
import 'zone.js/dist/zone'; // Included with Angular CLI.

をいれて、zone.jsのCustomElements APIのPatchを無効化します。

以上です。
どうもありがとうございました！