注意
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 便利と改めて思った。

今回の記事は以上です。

前回記事はこちら

詳細見たい人はこちら