4. Vite 中的 HMR（热模块替换）是如何工作的？它在构建过程中有什么优势？

在Vite中，HMR（Hot Module Replacement，热模块替换）是一个重要的特性，它可以在开发阶段实现实时更新和快速重新加载模块，而无需完全刷新整个页面。

具体来说，Vite的HMR工作原理如下：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=8e9ff865b0d84b46833cbfe45a5c001d

当应用程序启动时，Vite会创建一个WS（WebSocket）服务器，用于与浏览器建立实时通信。
当你修改了一个文件并保存时，Vite会检测到文件的变化，并将该变化推送到浏览器端。
浏览器通过WS连接接收到变化的通知后，会向Vite请求有关被更新模块的新代码。
Vite根据请求返回更新后的模块代码，并通知浏览器更新相应的模块。
浏览器利用新的模块代码进行局部更新，保持页面的状态和数据不变，提供了无刷新的开发体验。

Vite的HMR在构建过程中有以下优势：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=8e9ff865b0d84b46833cbfe45a5c001d

快速更新：通过HMR，Vite能够在开发阶段实现快速更新，将变更仅限于修改的模块，而不需要重新构建和刷新整个页面。这大大缩短了调试和开发周期，提高了开发效率。
保持状态：HMR能够在模块更新时保持应用程序的状态和数据。当你修改一个模块后，不会丢失已有的应用状态，使得开发过程更加流畅。
模块级热更新：Vite的HMR能够实现模块级别的热替换。这意味着你可以在不影响其他模块的情况下，只更新当前修改的模块，从而最小化代码刷新带来的影响。
更少的构建开销：由于Vite不需要在每次文件修改时重新构建整个应用程序，因此在开发过程中能够减少构建开销，提高构建速度。

综上所述，Vite的HMR使得前端开发者在开发阶段能够更加高效地进行模块修改，快速查看结果并保持应用程序的状态，极大地提升了开发体验和开发效率。