Effective Angularの第9章のまとめ | N-BLOGΣ（゜Д゜）カッ!

9章：Enhancing the Performance and Security of Angular Applications
を読んだので調べたことをつらつらと書く

・OnPushとレイアウトの更新について
キューについての説明はこれ
https://tech.quartetcom.co.jp/2021/12/20/angular-async-testing/
レイアウト更新の仕組みはこれ
https://justangular.com/blog/a-change-detection-zone-js-zoneless-local-change-detection-and-signals-story
プロパティでデータを渡した時だけ更新する
https://blogs.jp.infragistics.com/entry/what-is-angular-change-detection

・zoneの実行

import 'zone.js';
const zone = Zone.current.fork({
  onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) => {
    console.log('<Before zone.run>');
    delegate.invokeTask(target, task, applyThis, applyArgs);
    console.log('<After zone.run>');
  },
  name: 'test',
});
zone.run(() => {
  setTimeout(() => {
    console.log('Inside zone');
  }, 1000);
});

### 結果
before
inside
after

・runOutsideAngular
Zoneから離れて計算することもでき、パフォーマンスの改善を望むことができる

protected readonly ngZone = inject(NgZone);
    this.ngZone.runOutsideAngular(() => {
    setTimeout(() => {
        console.log('Outside Angular Zone');
    }, 1500);
    this.ngZone.run(() => {
    console.log('Back inside Angular Zone');
    });
});

・ngsrc
imgタグに
ngsrc属性を使ううとngoptimizedimageになってワーニングがでる
https://zenn.dev/hoshima19/articles/31fc0bbb3d916e

・Guard
ルーティングでガードを設定することで未ログイン/ログインような制御ができる
https://angular.jp/guide/routing/route-guards

Effective Angular

Pocket

関連記事: