web-dev-qa-db-ja.com

Webpackのホットモジュール交換とは何ですか？

WebpackのHot Module Replacementについて fewpages を読みました。
サンプルアプリ もあります 使用する 。

私はこれをすべて読みましたが、まだ考えがわかりません。

私はそれで何ができますか？
本番環境ではなく、開発環境でのみ使用することになっていますか？
LiveReloadに似ていますが、自分で管理する必要がありますか？
何らかの方法でWebpackDevServerが統合されていますか？

ページをリロードせず、LiveReloadなどのプラグインを使用せずに、ディスクに保存するときにCSS（1つのスタイルシート）とJSモジュールを更新するとします。これは、Hot Module Replacementで役立つものですか？どのような作業を行う必要があり、HMRはすでに何を提供していますか？

javascriptmodulelivereloadwebpack
186
Dan Abramov

最初に、Hot Module Replacement（HMR）はまだ実験的な機能であることに注意したい

HMRは、実行中のアプリケーションでモジュールを交換する（およびモジュールを追加/削除する）方法です。基本的に、ページ全体をリロードすることなく、変更されたモジュールを更新できます。

ドキュメンテーション

前提条件：

HMRにとってはそれほど重要ではありませんが、ここにリンクがあります。

これらの回答をドキュメントに追加します。

どのように機能しますか？

アプリビューから

アプリコードは、HMRランタイムに更新を確認するように要求します。 HMRランタイムは、更新をダウンロード（非同期）し、更新が利用可能であることをアプリコードに通知します。アプリコードは、HMRランタイムに更新を適用するように要求します。 HMRランタイムは更新（同期）を適用します。アプリコードでは、このプロセスでユーザーの操作が必要な場合と必要でない場合があります（ユーザーが決定します）。

コンパイラー（webpack）ビューから

通常のアセットに加えて、コンパイラは、「アップデート」を発行して、以前のバージョンからこのバージョンへのアップデートを許可する必要があります。 「更新」には2つの部分が含まれます。

  1. 更新マニフェスト（json）
  2. 1つまたは複数の更新チャンク（js）

マニフェストには、新しいコンパイルハッシュとすべての更新チャンクのリストが含まれます（2）。

更新チャンクには、このチャンク内の更新されたすべてのモジュールのコード（またはモジュールが削除された場合はフラグ）が含まれます。

コンパイラはさらに、モジュールとチャンクIDがこれらのビルド間で一貫していることを確認します。 「レコード」jsonファイルを使用して、ビルド間でそれらを保存します（またはメモリに保存します）。

モジュールビューから

HMRはオプトイン機能であるため、HMRコードを含むモジュールにのみ影響します。ドキュメントでは、モジュールで利用可能なAPIについて説明しています。一般に、モジュール開発者は、このモジュールの依存関係が更新されたときに呼び出されるハンドラーを作成します。また、このモジュールが更新されたときに呼び出されるハンドラーを作成することもできます。

ほとんどの場合、すべてのモジュールにHMRコードを記述することは必須ではありません。モジュールにHMRハンドラーがない場合、更新はバブルアップします。これは、単一のハンドラーが完全なモジュールツリーの更新を処理できることを意味します。このツリーの1つのモジュールが更新されると、完全なモジュールツリーが再ロードされます（再ロードのみで、転送はされません）。

HMRランタイムビューから（技術）

モジュールparentsおよびchildrenを追跡するために、モジュールシステムランタイムに追加のコードが発行されます。

管理側では、ランタイムはcheckとapplyの2つのメソッドをサポートしています。

checkは、更新マニフェストに対してHTTP要求を実行します。この要求が失敗した場合、利用可能な更新はありません。そうでない場合、更新されたチャンクのリストは、現在ロードされているチャンクのリストと比較されます。ロードされたチャンクごとに、対応する更新チャンクがダウンロードされます。すべてのモジュールの更新は、更新としてランタイムに保存されます。ランタイムはready状態に切り替わります。これは、更新がダウンロードされ、適用の準備ができたことを意味します。

準備完了状態の新しいチャンク要求ごとに、更新チャンクもダウンロードされます。

applyメソッドは、更新されたすべてのモジュールに無効のフラグを立てます。無効なモジュールごとに、モジュール内の更新ハンドラーまたはすべての親の更新ハンドラーが必要です。そうでない場合は、無効なバブルが発生し、すべての親も無効としてマークされます。このプロセスは、「バブルアップ」が発生しなくなるまで続きます。エントリポイントまでバブルアップすると、プロセスは失敗します。

これで、無効なモジュールはすべて破棄され（ハンドラーを破棄）、アンロードされます。次に、現在のハッシュが更新され、すべての「受け入れ」ハンドラーが呼び出されます。ランタイムはidle状態に戻り、すべてが通常どおり続行します。

generated update chunks

私はそれで何ができますか？

LiveReloadの代替として開発で使用できます。実際、webpack-dev-serverは、ページ全体をリロードする前にHMRで更新しようとするホットモードをサポートしています。 webpack/hot/dev-serverエントリポイントを追加し、--hotでdev-serverを呼び出すだけです。

本番環境で更新メカニズムとして使用することもできます。ここでは、HMRとアプリを統合する独自の管理コードを作成する必要があります。

一部のローダーは、ホットアップデート可能なモジュールをすでに生成しています。例えばstyle-loaderはスタイルシートを交換できます。特別なことをする必要はありません。

ページをリロードせず、LiveReloadなどのプラグインを使用せずに、ディスクに保存するときにCSS（1つのスタイルシート）とJSモジュールを更新するとします。これは、Hot Module Replacementで役立つものですか？

はい

どのような作業を行う必要があり、HMRはすでに何を提供していますか？

以下に小さな例を示します。 http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

モジュールは、「受け入れる」場合にのみ更新できます。したがって、親のモジュールまたは親の親をmodule.hot.acceptする必要があります...ルーターは良い場所、またはサブビューです。

Webpack-dev-serverでのみ使用する場合は、webpack/hot/dev-serverをエントリポイントとして追加します。それ以外の場合は、checkおよびapplyを呼び出すHMR管理コードが必要です。

意見：何がそんなにクールなのですか？

  • LiveReloadですが、すべてのモジュールの種類に対応しています。
  • 本番環境で使用できます。
  • 更新ではコード分割が考慮され、アプリの使用部分の更新のみがダウンロードされます。
  • アプリケーションの一部に使用でき、他のモジュールには影響しません
  • HMRが無効になっている場合、すべてのHMRコードはコンパイラーによって削除されます（if(module.hot)でラップします）。

注意事項

  • それは実験的であり、十分にテストされていません。
  • いくつかのバグが予想されます。
  • 本番環境では理論的には使用できますが、深刻な問題に使用するには時期尚早かもしれません。
  • モジュールIDは、コンパイル間で追跡する必要があるため、それらを保存する必要があります（records）。
  • オプティマイザーは、最初のコンパイル後にモジュールIDを最適化できなくなります。バンドルのサイズに少し影響。
  • HMRランタイムコードは、バンドルサイズを増やします。
  • 実稼働環境で使用する場合、HMRハンドラーをテストするには追加のテストが必要です。これはかなり難しいかもしれません。
325
Tobias K.

とにかく受け入れられた答えは、すべてが正しいことを説明しています。以下の説明は、HMRが何であるかを素早く理解するのに役立ちます。

ホットモジュールの交換は、開発者から注目を集めているJavaScript開発の最新技術の1つです。モジュールを実行時の変更に置き換えることにより、ページの更新回数を減らして開発を支援します。

HMRについて検索しているときに、インターネット上の概念を説明する 記事 が見つかりました。ここからそれを取得でき、あまり説明せずに概念を説明するGIFイメージを追加します。

ここで作業中です。ページのリロード後にタイマーが0にリセットされず、cssが自動更新も変更することに注意してください。 Hot Module Replacement GIF

WebpackはHMRの実現に役立ちます。ドキュメントを見つけることができます こちら

フォローを達成するのに役立ちます

  • 完全なリロード中に失われたアプリケーションの状態を保持します。

  • 変更内容を更新するだけで、貴重な開発時間を節約できます。

  • スタイリングの高速化-ブラウザのデバッガーでスタイルを変更するのとほぼ同等.

ここ はHMRを達成するためのwebpackガイドです

7
Samuel J Mathew

ホットモジュール交換（HMR）は、開発サーバーを自動的にライブ更新するツールです。ファイルの変更を監視し、ページ全体をリロードせずに特定のモジュールまたは要素を置き換えるようにブラウザに指示します。 （参照せずにcssを更新するスタイルローダーのように）HMRはwebpackの組み込みプラグインです。 index.jsで、次の構成を追加します。

if(module.hot){
   module.hot.accept();
}

または経由

npm install react-hot-loader

HMRの利点：

  • コードをデバッグしても、ブラウザはページを参照しないため、ステートメントはコンソールに残ります。
  • ページの更新は頭痛の種です。ページがロードされるまで待つ必要があり、大規模なアプリケーションでは数秒かかる場合があります。 HMRは生産性を向上させます。
  • HMRでアプリケーションの状態を維持できます
0
Yilmaz