在 Next.js 中，HMR(Hot Module Replacement) 是一个很棒的特性，它可以使得我们对代码进行修改后，不需要刷新整个页面就能够立即看到更改的效果。但是，有时候你可能会遇到 HMR 无效的问题，也就是修改代码后页面并没有立即更新，这个问题实在是很让人头疼。如何解决这个问题呢？本篇文章就来给大家介绍一下。
HMR 的原理
在介绍解决方案之前，先来了解一下 HMR 的原理。HMR 实际上是利用 Webpack 的 HotModuleReplacementPlugin 插件来实现的，当一个模块发生变化时，这个插件会将变化的模块替换掉，而不是整个重新加载。这个过程是在浏览器中完成的，它通过 WebSocket 连接实现了和服务器端的交互，从而使得模块的更新可以被实时地推送到浏览器端。
HMR 无效的问题
HMR 无效的问题一般有两种情况，一种是修改的模块没有被 HMR 支持，另一种是 HMR 本身出现了问题。
修改的模块没有被 HMR 支持
由于 HMR 依赖于模块的加载器(loader)来实现，因此只有支持 HMR 的模块加载器才能够让修改后的模块被实时地更新。常见的模块加载器有以下几种：
babel-loadercss-loaderstyle-loaderfile-loaderurl-loadervue-loader
如果你使用的是自定义的模块加载器且没有对 HMR 进行支持，则会出现 HMR 无效的问题。此时，你需要在自己的模块加载器中手动添加 HMR 功能。
HMR 本身出现了问题
除了模块加载器没有对 HMR 进行支持之外，还有一些其他的原因会导致 HMR 无效。下面列举了一些比较常见的原因：
- 程序运行错误
- React 组件的类名修改
- 在类组件中添加新的成员变量
- 在构造函数中添加了新的变量
这些原因都会导致 HMR 失效，需要采取相应的措施来处理。
解决方案
在了解了 HMR 的原理以及常见的 HMR 无效原因之后，下面就来介绍一些解决方案了。
支持 HMR 的模块加载器
如果你的模块加载器没有对 HMR 进行支持，则可以通过手动添加 HMR 功能来解决。以 sass-loader 为例，在 Webpack 配置文件中添加以下代码即可：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ----------
---- -
-- ---
-
------- --------------
-------- -
---- ----- -- -----
--
--
--
--
--
--
-- ---
--通过这样的方式，就可以让 sass-loader 支持 HMR 了。
修改 React 组件的类名
如果你的 React 组件的类名被修改了，可以通过 React-Hot-Loader 来解决。在 Next.js 中，我们只需要安装 next-plugin-react-refresh 或者 @pmmmwh/react-refresh-webpack-plugin 插件即可。例如，使用 next-plugin-react-refresh 的话，可以在 next.config.js 中添加以下代码：
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
// ...
plugins: [new ReactRefreshWebpackPlugin()],
// ...
};这样就可以支持 React 组件的 HMR 了。
为类组件添加成员变量
如果你在类组件中添加了新的成员变量，可以通过重写 shouldComponentUpdate 方法来解决。以下是一个示例代码：
-- -------------------- ---- -------
----- ------- ------- --------------- -
----- - -
------ --
------- -- -- --------
--
-------------------------------- ---------- -
-- ------------------ --- ----------------- -
------ -----
-
------ ------
-
----------- - -- -- -
---------------
------ ---------------- - --
------- ----------------- - --
---
--
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-在 shouldComponentUpdate 方法中，我们对新添加的成员变量 newVar 进行了比较，如果发生了变化，就返回 true，表示需要更新组件。
在构造函数中添加新变量
如果你在构造函数中添加了新的变量，也可以通过重写 shouldComponentUpdate 方法来解决。以下是一个示例代码：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
------- ------------- -- ------
--
-
-------------------------------- ---------- -
-- ------------------ --- ----------------- -
------ -----
-
------ ------
-
----------- - -- -- -
---------------
------ ---------------- - --
------- ----------------- - --
---
--
-------- -
------ -
-----
--------- ----------------------
------- -------------------------------- -----------
------
--
-
-在构造函数中，我们将 props.newVar 赋值给了 state.newVar，并在 shouldComponentUpdate 方法中进行了比较。
总结
本篇文章主要介绍了 Next.js 中的热重载(HMR)无效问题的解决方案，包括支持 HMR 的模块加载器、React 组件的类名修改、为类组件添加成员变量以及在构造函数中添加新变量等方面。希望大家通过这篇文章能够更好地掌握 HMR 的原理和应用，避免在开发过程中出现 HMR 无效的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f114bff6b2d6eab3af11db