注意
Zoneless はexperimental(実験的機能)です。
Angular は@18.2.12です。
前置き
Angular の記事を読むとZoneless という単語がよく出てくる。
気になったので、公式サイトを見ながら少し触って通常(withZone)とZonelessとを比較したメモがこちら。
なお、今回比較したのは次の2点。
-
<button>の click event 時の挙動 - Observable から値を受け取った時の挙動
↓公式サイト
↓成果物
本編
結果
click event 時の挙動の変化は、今回のやり方では分からなかった。
Observable から値を受け取った時の挙動の変化は以下の通りであった。
withZone の場合は、都度ngDoCheck()が発火し、更新された値が画面に表示された。
Zoneless の場合は、ngDoCheck()が発火しなかった。
また、Signal を使用していなければ更新された値が画面に表示されなかった。
ファイルサイズはwithZone が237 kB、Zoneless が202 kBであった。
比較方法
ソースファイルがほぼ同じである2つのAngular アプリを作成した。
主な違いは次の二点である。
一点は、ApplicationConfigのprovidersに設定しているのがprovideZoneChangeDetection({ eventCoalescing: true })かprovideExperimentalZonelessChangeDetection()かである。
もう一点は、ビルドオプションのpolyfillsにzone.jsを設定しているかいないかである。
また、コンポーネントにはngDoCheck()の発火回数をconsole に出力するようにした。
さらに、画面に表示させるためのプロパティを2つ追加した。
一方は<button>の click event から、もう一方はObservable から受け取った値で変化するようにした。
そして2つのアプリを操作し、ngDoCheck()の発火回数および画面の表示がZoneless によりどのように変化したか比較した。
感想
楽しかった。
あと、簡単に公開できるGitHub Pages 便利と改めて思った。
今回の記事は以上です。
前回記事はこちら
詳細見たい人はこちら