# 帳票設計書 20-NoAsyncChunksWarning

## 概要

本ドキュメントは、非同期チャンクが存在しない場合の警告レポートを出力する「NoAsyncChunksWarning」の設計仕様を定義するものである。

### 本帳票の処理概要

NoAsyncChunksWarning は、webpackビルドにおいてアセットサイズまたはエントリーポイントサイズが上限を超過しているにもかかわらず、非同期チャンク（コード分割による遅延読み込みチャンク）が一切存在しない場合に出力される警告帳票である。コード分割が行われていないことを示し、`import()` や `require.ensure` によるコード分割の実施を推奨するメッセージを出力する。

**業務上の目的・背景**：バンドルサイズが上限を超過している場合、最も効果的な対策の一つがコード分割である。非同期チャンクが存在しないということはコード分割が行われていないことを意味するため、開発者にコード分割の導入を促すことで、Webパフォーマンスの改善を支援する。

**帳票の利用シーン**：本番ビルド時にアセット/エントリーポイントのサイズ超過が検出され、かつコード分割が未導入の場合に自動的に出力される。

**主要な出力内容**：
1. パフォーマンス推奨メッセージ - "webpack performance recommendations:"
2. コード分割の推奨 - "You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application."
3. 参照リンク - "For more info visit https://webpack.js.org/guides/code-splitting/"

**帳票の出力タイミング**：webpackビルドの `afterEmit` フックで SizeLimitsPlugin により実行される。AssetsOverSizeLimitWarning または EntrypointsOverSizeLimitWarning が発生した後、非同期チャンクの有無が検査され、存在しない場合にのみ出力される。

**帳票の利用者**：フロントエンド開発者。

## 帳票種別

警告レポート（パフォーマンス推奨）

## 利用画面

| 画面No | 画面名 | URL/ルーティング | 出力操作 |
|--------|--------|-----------------|---------|
| - | webpack設定 | `performance: { hints: 'warning' }` | ビルド実行時に自動判定 |

## 出力形式

### 基本仕様

| 項目 | 内容 |
|-----|------|
| ファイル形式 | テキスト（WebpackError の message プロパティ） |
| 用紙サイズ | N/A |
| 向き | N/A |
| ファイル名 | N/A（compilation.warnings / compilation.errors に追加） |
| 出力方法 | 標準エラー出力（Stats出力時に表示） |
| 文字コード | UTF-8 |

## 帳票レイアウト

### レイアウト概要

警告メッセージは以下の固定テキストで出力される。

```
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
```

### ヘッダー部

| No | 項目名 | 説明 | データ取得元 | 表示形式 |
|----|-------|------|-------------|---------|
| 1 | 推奨タイトル | パフォーマンス推奨の見出し | 静的テキスト | 文字列 |

### 明細部

| No | 項目名 | 説明 | データ取得元 | 表示形式 | 列幅 |
|----|-------|------|-------------|---------|-----|
| 1 | 推奨メッセージ | コード分割の推奨テキスト | 静的テキスト | 文字列 | - |
| 2 | 参照URL | webpackコード分割ガイドへのリンク | 静的テキスト | URL | - |

### フッター部

該当なし。

## 出力条件

### 抽出条件

| 条件名 | 説明 | 必須 |
|-------|------|-----|
| 他の警告存在 | AssetsOverSizeLimitWarning または EntrypointsOverSizeLimitWarning が1件以上存在すること | Yes |
| 非同期チャンク不在 | compilation.chunks の中に `!chunk.canBeInitial()` を満たすチャンクが1つも存在しないこと | Yes |
| hintsオプション | performance.hints が truthy であること | Yes |

### ソート順

該当なし（単一メッセージ）。

### 改ページ条件

N/A

## データベース参照仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 結合条件 |
|-----------|------|---------|
| compilation.chunks | 非同期チャンクの有無確認 | Set<Chunk> |

### テーブル別参照項目詳細

#### Chunk

| 参照項目 | 帳票項目との対応 | 取得条件 | 備考 |
|---------|----------------|---------|------|
| canBeInitial() | 非同期チャンク判定 | false を返すチャンクが非同期 | find() で1つでも見つかれば警告は出力されない |

## 計算仕様

### 計算項目一覧

| 項目名 | 計算式 | 端数処理 | 備考 |
|-------|-------|---------|------|
| someAsyncChunk | find(compilation.chunks, chunk => !chunk.canBeInitial()) | なし | 非同期チャンクが1つでも存在するかの判定 |

## 処理フロー

### 出力フロー

```mermaid
flowchart TD
    A[afterEmit フック] --> B[アセット/エントリーポイント サイズチェック]
    B --> C{warnings.length > 0?}
    C -->|No| D[警告なし]
    C -->|Yes| E[compilation.chunks で非同期チャンク検索]
    E --> F{非同期チャンク存在?}
    F -->|Yes| G[NoAsyncChunksWarning は出力しない]
    F -->|No| H[new NoAsyncChunksWarning 生成]
    H --> I{hints === error?}
    I -->|Yes| J[compilation.errors に追加]
    I -->|No| K[compilation.warnings に追加]
```

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 表示メッセージ | 対処方法 |
|----------|---------|--------------|---------|
| 特になし | - | - | 警告/エラーとして出力されるが、処理自体は失敗しない |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定データ件数 | 0 または 1（存在するかしないかの判定） |
| 目標出力時間 | 即時 |
| 同時出力数上限 | N/A |

## セキュリティ考慮事項

特になし。静的テキストのみの出力であり、機密情報は含まれない。

## 備考

- NoAsyncChunksWarning は AssetsOverSizeLimitWarning / EntrypointsOverSizeLimitWarning が存在する場合にのみ検査・出力される。サイズ超過が無い場合は出力されない。
- 警告メッセージは完全に固定のテキストであり、動的データは含まれない。
- `find` 関数は `lib/util/SetHelpers.js` から import されたユーティリティで、Set の要素から条件にマッチする最初の要素を返す。
- この警告は、開発者に `import()` による動的インポートや `require.ensure` によるコード分割の導入を促すものである。

---

## コードリーディングガイド

本帳票を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | NoAsyncChunksWarning.js | `lib/performance/NoAsyncChunksWarning.js` | WebpackError を継承した単純な警告クラス（10-21行目）。コンストラクタ引数なし |

**読解のコツ**: NoAsyncChunksWarning は他のパフォーマンス警告と異なり、コンストラクタ引数を取らない。メッセージは完全に固定テキスト。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SizeLimitsPlugin.js | `lib/performance/SizeLimitsPlugin.js` | NoAsyncChunksWarning の生成条件（164-171行目） |

**主要処理フロー**:
1. **164行目**: `warnings.length > 0` - 他の警告が存在するか確認
2. **165-168行目**: `find(compilation.chunks, chunk => !chunk.canBeInitial())` - 非同期チャンクの検索
3. **170行目**: 非同期チャンクが見つからない場合、`new NoAsyncChunksWarning()` を生成
4. **174-178行目**: hints の値に応じて errors または warnings に追加

#### Step 3: 警告メッセージ

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | NoAsyncChunksWarning.js | `lib/performance/NoAsyncChunksWarning.js` | super() で固定メッセージを設定（12-16行目） |

**主要処理フロー**:
- **12-15行目**: 3行の固定メッセージを文字列連結で生成
- **18行目**: `this.name = "NoAsyncChunksWarning"` を設定

### プログラム呼び出し階層図

```
SizeLimitsPlugin.apply(compiler)
    │
    └─ compiler.hooks.afterEmit.tap
           │
           ├─ AssetsOverSizeLimitWarning / EntrypointsOverSizeLimitWarning チェック
           │
           ├─ warnings.length > 0 判定
           │
           ├─ find(compilation.chunks, chunk => !chunk.canBeInitial())
           │      └─ 非同期チャンク検索
           │
           ├─ !someAsyncChunk の場合
           │      └─ new NoAsyncChunksWarning()
           │
           └─ compilation.warnings.push / compilation.errors.push
```

### データフロー図

```
[入力]                       [処理]                           [出力]

compilation.chunks        SizeLimitsPlugin                 NoAsyncChunksWarning
(canBeInitial())          afterEmit フック                  (WebpackError)
       │                  ────────────────────▶              │
       │                  非同期チャンク存在チェック            └── message: 固定テキスト
       │                                                         (コード分割推奨)
       │
warnings[] ────────────▶ 他の警告存在確認
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| NoAsyncChunksWarning.js | `lib/performance/NoAsyncChunksWarning.js` | ソース | 警告メッセージの生成 |
| SizeLimitsPlugin.js | `lib/performance/SizeLimitsPlugin.js` | ソース | サイズチェック・警告発行のメインロジック |
| SetHelpers.js | `lib/util/SetHelpers.js` | ソース | find() ユーティリティ関数 |
| WebpackError.js | `lib/WebpackError.js` | ソース | 警告/エラーの基底クラス |
| AssetsOverSizeLimitWarning.js | `lib/performance/AssetsOverSizeLimitWarning.js` | ソース | アセットサイズ超過警告（前提条件） |
| EntrypointsOverSizeLimitWarning.js | `lib/performance/EntrypointsOverSizeLimitWarning.js` | ソース | エントリーポイントサイズ超過警告（前提条件） |
