Hot Module replacement

Welcome to wechat public account: Front Reading Room

The HMR-Hot Module replacement function replaces, adds, or removes modules while the application is running without reloading the entire page. Significantly speed up development in the following ways:

  • Preserve application state that is lost during a full page reload.

  • Update only the changes to save valuable development time.

  • When CSS/JS changes are made in the source code, they are immediately updated in the browser, which is almost equivalent to changing styles directly in the browser DevTools.

How does it all work?

Let’s look at it from a few different angles to see how HMR works…

In the application

You can swap in and out modules in your application by following these steps:

  1. The application requires HMR Runtime to check for updates.
  2. The HMR Runtime downloads updates asynchronously and notifies the application.
  3. The application requires HMR Runtime application updates.
  4. HMR Runtime applies updates synchronously.

You can set the HMR so that the process automatically triggers updates, or you can choose to require updates at user interaction time.

In the compiler

In addition to normal resources, the Compiler issues “update” to update the previous version to the new version. The update” consists of two parts

  • Updated manifest (JSON)
  • One or more updated Chunks (JavaScript)

The manifest includes the new Compilation hash and all updated Chunk lists. Each chunk contains the latest code for all updated modules (or a flag indicating that the module needs to be removed).

Compiler ensures that module ids and chunk ids are consistent between these builds. These ids are typically stored in memory (for example, when using webpack-dev-server), but they may also be stored in a JSON file.

In the module

HMR is optional and only affects modules that contain HMR code. For example, append a patch to style via style-loader. Style-loader implements the HMR interface in order to run the add-on patch. When it receives updates through HMR, it replaces the old style with the new one.

Similarly, when an HMR interface is implemented in a module, you can describe what happens when the module is updated. In most cases, however, there is no need to force HMR code into every module. If a module does not have an HMR handler, updates will bubble up. This means that a single handler can update the entire module tree. If a single module in the module tree is updated, the entire set of dependent modules is reloaded.

For more information about the Module. hot interface, see the HMR API page.

In the runtime

It’s a technical thing… If you’re not interested in its internals, feel free to jump to the HMR API page or the HMR Guide.

For the Module System Runtime, additional code is emitted to track the module parents and children relationship. For administration, the Runtime supports two methods check and Apply.

The check method sends an HTTP request to update the manifest. If the request fails, no updates are available. If the request is successful, the updated Chunk list is compared to the current loaded Chunk list. Each loaded chunk downloads the corresponding updated chunk. When all the update chunks have downloaded, the Runtime will switch to ready.

The apply method flags all updated Modules as invalid. For each invalid module, there needs to be an Update handler in the module, or in the module’s parent module. Otherwise, invalid tags bubble up and the parent is marked as invalid. Continue each bubble until it reaches the start of the application entry or the Module with an Update handler (whichever comes first, the bubble stops). If it starts bubbling from the entry point, the process fails.

After that, all invalid modules are disposed and unloaded (via the Dispose Handler). It then updates the current hash and calls all Accept handlers. The Runtime switches back to Idle and everything continues as usual.

start

In a development environment, HMR can be used as an alternative to LiveReload. Webpack-dev-server supports hot mode, which attempts to update with HMR before attempting to reload the entire page. See the module hot replacement guide for more details.

Tip

As with many other features, the power of WebPack lies in its customizability. Depending on specific project requirements, there are many ways to configure an HMR. However, webpack-Dev-Server is a good fit for most project implementation purposes and can help you quickly apply HMR to your project.

Welcome to wechat public account: Front Reading Room