前言
在前端开发中，不同的项目都需要实现不同的需求，因此也会使用不同的技术栈来完成。对于需要快速搭建项目原型、开发复杂应用、提高开发效率的需求，使用 Next.js 技术栈是不错的选择。
在使用 Next.js 进行开发时，你可能会遇到 “代码修改后浏览器自动刷新” 的需求或问题，这时候 HMR(Hot Module Replacement) 就派上用场了。
HMR 是一种优化前端开发流程的技术，它可以做到代码修改后实时更新浏览器中已经加载的页面，而无需刷新浏览器。
在这篇文章中，我们将会详细介绍 Next.js 中的 HMR 方案，并给出具体的学习和指导意义。
HMR 的基本概念
从字面意思上理解，"Hot Module Replacement" 就是热模块替换，它的主要作用是在开发环境中提高开发效率，减少代码修改后需要手动刷新页面的操作。
我们知道，前端页面中的代码是由多个模块构成的，HMR 的实现是对每个模块的改动进行实时监测，当某个模块发生变化时，只有这个模块及其相关联的模块需要重新加载，页面不需要整体刷新。
简单来说，HMR 技术能够让我们在不刷新浏览器的情况下修改代码，并立即在浏览器中生效。
Next.js 中的 HMR
Next.js 在其开发模式下默认启用了 HMR，因此我们可以在开发模式下使用 HMR 技术来提高开发效率。
具体实现时，Next.js 会在服务器端为每个模块生成独立的 ID，并将这些 ID 与模块内容关联。模块修改后，Next.js 会将修改后的模块内容和之前生成的 ID 一起发送到客户端，让客户端只更新修改过的模块，从而实现热更新。
接下来，我们将结合代码示例来具体介绍使用 Next.js 的 HMR 技术。
安装 Next.js
在开始使用 Next.js HMR 技术之前，我们需要先安装 Next.js，具体的安装过程请参阅官方文档。
编写示例代码
修改页面单个组件
我们来编写一个 Next.js 应用中的示例代码，在页面上渲染一个计数器并提供一个按钮来实现增加计数器的功能。
首先，我们需要准备一个基本的 Next.js 应用，具体实现请参阅官方文档。
然后，我们可以在 pages/index.js 文件中增加一个简单的 Counter 组件，代码如下：
------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- --------------- - -- -- -
-------------- - ---
--
------ -
--
--------- -----------
------- --------------------------------------------
---
--
--
------ ------- --------然后，我们在 pages/index.js 文件中渲染 Counter 组件，代码如下：
------ ------- ---- ------------------------
------ ------- -------- ------ -
------ -
-----
--------- ------------
-------- --
------
--
-当我们在浏览器中打开页面时，会看到计数器的界面和“Increment”按钮，我们可以尝试点击按钮，在页面上会实时显示计数器的值变化。
现在，我们来测试修改页面中 Counter 组件的样式时是否具备 HMR 技术。首先，我们在 pages/index.js 文件中的 Counter 组件中增加样式，代码如下：
----- ------- - -- -- -
----- ------- --------- - ------------
----- --------------- - -- -- -
-------------- - ---
--
------ -
--
-- -------- ---------------- ----- --------- -----------
------- --------------------------------------------
---
--
--保存修改后，在浏览器上观察 Counter 组件的样式是否实时更新。在下面的小节中，我们将详细讲解结果。
修改页面路由
除了单个组件的修改，我们也可以尝试修改页面路由来测试 HMR 的效果。
首先，我们还是需要准备一个基本 Next.js 应用。
接下来，我们在 pages 目录下增加一个新文件 pages/about.js，代码如下：
------ ------- -------- ------- - ------ --------- ---------- -
在浏览器中访问 localhost:3000/about，应该可以看到“About Page”这几个字。
现在，我们在 pages/about.js 中增加一个文本元素，代码如下：
------ ------- -------- ------- -
------ -
--
--------- ---------
------- -- - --------- --- --- ----- ---------
---
--
-保存修改后，在浏览器上观察页面是否实时更新。在下面的小节中，我们将详细讲解结果。
如何观察 HMR 的效果
对于以上两个小节的示例代码，我们可以在浏览器中观察 HMR 技术的实时更新效果。具体实现如下：
在终端中进入到 Next.js 应用所在目录，使用以下命令启动应用：
--- --- ---
在浏览器中访问 http://localhost:3000/，打开浏览器控制台，可以看到如下提示：
----- ---------
这意味着 HMR 正常启动，并随时准备好检测代码变更。
接下来，我们对两个示例代码中的文件进行修改并保存，可以观察到浏览器立即显示修改后的效果，而不需要手动刷新页面。
总结
在本文中，我们介绍了 HMR 技术的相关概念和在 Next.js 中的实现方式。使用 HMR 技术，可以提高开发效率，加快代码修改后的实时更新速度。
通过代码示例，我们具体介绍了在 Next.js 中如何编写和测试 HMR 效果。相信本文对于前端工程师的学习和指导有着一定的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6549d63d7d4982a6eb40d586