Help us understand the problem. What is going on with this article?

Ionic with Zone.js

この記事は 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はバージョン4からStencilを利用して、すべてがWebComponentになりました。

Screenshot from 2019-12-19 00-09-43.png

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

Screenshot from 2019-12-19 00-35-17.png

その結果、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を無効化します。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした