ホットモジュールリプレースメントとは? リロードなしのライブ編集

ホットモジュールリプレースメント (HMR) は、実行中の dev アプリの内部で、たった今編集したモジュールを、完全なページリロードなしで、かつアプリの状態を失わずに更新します。

開発中にファイルを保存すると、完全なページリロードは現在の状態を捨ててしまい、しかも遅いです。HMR は代わりに、変更されたモジュールだけを実行中のアプリに差し替え、影響を受ける部分を再レンダリングします。これにより、編集・保存・確認のループがほぼ瞬時になります。HMR は厳密に開発用の機能であり、CI の本番 build には現れません。

HMR の仕組み

dev server はファイルを監視し、ブラウザとの websocket を開いたままにします。モジュールが変更されると、そのモジュールだけを送り、ページ内の runtime が古いバージョンを置き換え、それに依存する部分を再実行します。

状態を保持する

ページが決してリロードされないため、フォーム入力やコンポーネントの状態といったメモリ内の状態が編集をまたいで生き残れます。フレームワークは HMR 統合を追加し、コンポーネントを一から再マウントするのではなく、その場で更新できるようにします。

どこに位置づけられるか

dev server を使ったローカル開発中のみアクティブ。
dev server とブラウザ間の websocket によって駆動される。
本番 build では完全に無効化される。

限界とフォールバック

モジュールレベルの副作用への編集など、一部の変更は安全にホットスワップできません。モジュールがホット更新できない場合、ツールは正しさを保つために完全なリロードにフォールバックします。

HMR と CI/CD

CI はライブの dev セッションではなく最適化された静的出力を生成するため、HMR が pipeline で実行されることはありません。関連する CI の関心事は、dev と CI の build を一貫させることです。同じバンドラーが、ローカルでは HMR 付きの dev server を、CI ではミニファイされた artifact を生成するため、挙動の整合が保たれます。

重要なポイント

HMR は、完全なリロードなしで、実行中の dev アプリに変更されたモジュールを差し替えます。
編集をまたいでアプリの状態を保持でき、dev のループを高速化します。
HMR は開発専用であり、CI の本番 build の一部になることは決してありません。