javascript - webpack のホット モジュール リロードを受け入れるべきでないのはどのような場合ですか?

Question

したがって、webpack では、モジュールまたはモジュールの親に次のコードがある場合にのみ HMR が機能します。

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

そもそもなぜあなたがHMRを断るのだろうか。それを使用することによるパフォーマンス コストやその他の悪影響はありますか?

ドキュメントはこの問題についてあまり明確ではありません。

Answer 1

HMR を使用できるのは、コードが

• ステートレス (CSS など) または
• 古い状態をクリーンアップするための準備を提供します

ほとんどのコードはステートレスではないため、追加の作業が必要です。これを実現する一般的な方法は、エクスポートされた関数をプロキシに置き換えることです ( react-hot-loaderは同様の方法で動作します)。したがって、他の依存関係を更新することなく、プロキシの背後にある実際の実装を置き換えることができます。

たとえば、次の (バグのある) モジュールを想像してください。

function add(a, b) {
    return a - b;
}

export add;

addバグに気付いた後、他のモジュールがその関数への参照を保持しているため、関数をその場で交換することはできません。そのため、エクスポートされた関数をラップするプロキシが必要です。

function _add(a, b) {
    return a - b;
}

export function add(a, b) {
    return _add(a, b);
};

_add他のモジュールを更新せずに簡単に交換できるようになりました。これは関数ではうまく機能しますが、エクスポートされたオブジェクト、数値、文字列などの他のタイプでは失敗します。ただし、 ES2015プロキシでは、あらゆる種類のプロキシのように機能するプレースホルダーをエクスポートできます。

したがって、HMR の課題は、奇妙な状態を残さずに古いコードを新しいコードに置き換える必要があることです。そして、それを一般的な方法で行うことは依然として困難です。