# ng-japan OnAir vol.36

https://www.youtube.com/watch?v=qrSJWEGlqfw

ng-japan OnAirはAngular日本ユーザー会が主催するオンラインイベントです

https://community.angular.jp
connpass: https://ngjapan.connpass.com/event/206285/
shownote: https://hackmd.io/@lacolaco/H18RBT7fd

#Angular #ng_jp_onair

## アジェンダ

- 再発見シリーズ "Angularのパフォーマンス最適化機能"

## 再発見シリーズ "Angularのパフォーマンス最適化機能"

はじめに見る >>> **https://web.dev/angular**

### ネットワークパフォーマンス最適化

#### `preserveWhitespaces`

- https://angular.jp/guide/angular-compiler-options#preservewhitespaces
- [Performance Tip: Preserving Whitespace \| by Austin \| Medium](https://medium.com/@amcdnl/performance-tip-preserving-whitespace-623378a38c32)

テンプレートHTMLの不要な空白を残すフラグ（デフォルト: `false`）
- 息の長いプロジェクトは `ng update`のマイグレーションで `true` になっている可能性あり

#### `import()`: Lazy Loading

`import()` は自動的にチャンク分割される

#### `ng build --prod`

`--prod`は `--configuration=production` のエイリアス

{
  ...
  "configurations": {
  
    "production": {
      ...
      "optimization": true,
      "buildOptimizer": true,
    }
  }
}

##### `optimization`: JIT/AOT共通最適化

- https://angular.jp/guide/workspace-config#optimization-configuration

{
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true // since v12
      },
      "fonts": true
    }
}

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/configs/common.ts#L337

- `scripts`
- Tree-shaking / デッドコード除去 / minify
- [terser](https://terser.org/)による最適化
- `styles.minify`
- CSSのminify
- [cssnano](https://cssnano.co/)による最適化
- `styles.inlineCritical`
- クリティカルCSSのインライン化
- [critter](https://github.com/GoogleChromeLabs/critters)による最適化
- `fonts`
- Webフォント読み込みCSSのインライン化

##### `buildOptimizer`: AOTコンパイル専用最適化

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_optimizer

- Class fold
- 静的プロパティへのアクセスをIIFEに畳み込み
- for Tree-Shaking
- Scrub file
- Angularデコレータのメタデータ除去
- Prefix classes/functions
- 副作用のない関数・クラスへ `/*@__PURE__*/`プレフィックスを付与
- Import tslib
- インライン化されたtslib関数をモジュールインポートへ置換
- Wrap enums
- TypeScript Enumの関数ラップとPURE化

### ランタイムパフォーマンス最適化

#### `enableProdMode`

https://angular.io/api/core/enableProdMode

変更検知のチェックを減らし、デバッグ用のメタデータを除去する

#### `pure` Pipe

- *純粋な*パイプは自動的にメモ化される
- Change Detectionの中で計算がスキップされる
- 純粋なパイプとは？
- 同じInputに対して結果が冪等であること
- 副作用を起こさないこと
- デフォルトは `pure: true`
- `async` や `json` などは`pure: false`

#### `OnPush` Change Detection

[Optimize Angular's change detection | web.dev](https://web.dev/faster-angular-change-detection/)
[\[日本語訳\] Angular 2 Change Detection Explained \| lacolaco/tech](https://blog.lacolaco.net/2016/04/translation-angular-2-change-detection-explained/)

- コンポーネントの変更検知のタイミングを限定する
- 親コンポーネントから `@Input()` へのバインディングが更新された（新しい入力をPushされた）ときだけ
- OnPushなコンポーネントを頂点とする子ツリー全体の計算をスキップできる

#### `*ngFor` TrackBy

https://angular.io/api/common/NgForOf#change-propagation
[Angular 2 — Improve Performance with trackBy \| by Netanel Basal \| Netanel Basal](https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5)
[ngForとtrackBy \- noxi雑記](https://noxi515.hateblo.jp/entry/2020/06/05/123138)

- NgForで変更の前後で要素の同一性を追跡するための識別子
- それぞれの要素が追加/削除/更新/変化なしのどれかを判定する
- デフォルトではオブジェクト参照の一致（プリミティブは値の一致）
- `item.id`で一致させるユースケースが多い

###### tags: `ng_jp_onair`