# 画面遷移図

本プロジェクトはwebpackのサンプル集であり、複数の独立したexampleが含まれています。
各exampleごとに画面遷移図を示します。

## 1. many-pages

```mermaid
graph LR
    subgraph many-pages
        PA[Page A] --- shared1[共通チャンク<br/>m1, m2]
        PB[Page B] --- shared1
        PC[Page C] --- shared1
        PD[Page D] --- shared2[共通チャンク<br/>m6, m7, m8]
        PE[Page E] --- shared2
        PF[Page F] --- shared2
        PG[Page G] --- shared2
    end
```

> **備考**: many-pagesは独立したエントリポイントの集合であり、明示的な画面遷移は定義されていません。共通モジュールによるチャンク共有関係を示しています。

## 2. hybrid-routing

```mermaid
graph LR
    subgraph hybrid-routing
        Router[router.js<br/>window.onLinkToPage] -->|"動的import<br/>aPage"| HA[Page A<br/>pageA.html]
        Router -->|"動的import<br/>bPage"| HB[Page B<br/>pageB.html]
        HA <-->|共通チャンク| HB
    end
```

## 3. reexport-components

```mermaid
graph LR
    subgraph reexport-components
        Entry["example.js<br/>import(./pages/${page})"] -->|動的import| Login[Login]
        Entry -->|動的import| Dashboard[Dashboard]
        Login -->|使用| Button[Button]
        Login -->|使用| Dialog[Dialog]
        Dashboard -->|使用| Button
        Dashboard -->|使用| Checkbox[Checkbox]
    end
```

## 4. multiple-entry-points

```mermaid
graph LR
    subgraph multiple-entry-points
        MPA[Page A<br/>pageA.html] --- Commons[commons.js<br/>共通モジュール]
        MPB[Page B] --- Commons
        MPAB[Page A+B<br/>pageAB.html] --- MPA
        MPAB --- MPB
    end
```

## 5. two-explicit-vendor-chunks

```mermaid
graph TD
    subgraph two-explicit-vendor-chunks
        V1[vendor1.js] --> TVA[Page A<br/>pageA.html]
        V2[vendor2.js] --> TVA
        V1 --> TVB[Page B]
        V2 --> TVC[Page C]
    end
```

## 6. code-splitting-depend-on-advanced

```mermaid
graph TD
    subgraph code-splitting-depend-on-advanced
        OV[other-vendors<br/>isomorphic-fetch, lodash] --> App[App<br/>app.js]
        RV[react-vendors<br/>react, react-dom, prop-types] --> P1[Page 1<br/>page1.js]
        App --> P1
        P1 -->|"動的import"| Lazy[lazy.js]
    end
```

## 7. module-federation

```mermaid
graph TD
    subgraph module-federation
        Host[App Host<br/>src/index.js] -->|"remoteEntry"| MFEB[MFE-B<br/>Component]
        Host -->|"remoteEntry"| MFEC[MFE-C<br/>Component]
        Host -->|"Suspense<br/>遅延読み込み"| MFEC_Lazy[MFE-C<br/>LazyComponent]
        SharedReact[react<br/>singleton共有] -.-> Host
        SharedReact -.-> MFEB
        SharedReact -.-> MFEC
    end
```

## 8. virtual-modules

```mermaid
graph LR
    subgraph virtual-modules
        VMEntry["example.js<br/>loadRoute()"] -->|"動的import"| VRA[Route A<br/>routes/a.js]
        VMEntry -->|"動的import"| VRB[Route B<br/>routes/b.js]
    end
```

## 9. dll-app-and-vendor

```mermaid
graph LR
    subgraph dll-app-and-vendor
        VendorDLL[vendor.js<br/>DLLバンドル] --> DLLApp[App<br/>example-app.js]
    end
```
