热更新配置

我们知道，热更新就是实时更新应用程序的变化，使得开发者能够在修改代码后立即看到结果，无需手动刷新浏览器。通常在各种项目中，配置热更新会让开发更高效快速。

vue3+vite项目中的热更是这样配置的。

在vite-config-ts中设置热更新:

server: {
    host: 'localhost',
    hmr: true
}

改完代码保存后，重新断开跑一下才会生效。

hmr

hmr (hot module replacement) 热模块替换。这个hmr功能能够在我们修改代码后，自动将更新的模块代码注入到运行中的应用程序，以便我们立即看到修改后的效果，而无需手动刷新页面。

1、模块热替换：当我们修改一个模块的代码时，vite会在构建的过程中生成一个独立的模块标识符。这个标识符可以唯一地识别一个模块。当你保存代码并触发重新构建时，vite会生成一个新的模块标识符，并与之前的标识符进行比较，以确定哪些模块发生了变化。

2、更新模块：一旦vite确定了发生变化的模块，它将会使用新的模块代码替换原有的模块，而无需完全重新加载整个应用程序。这样，只有受影响的模块会被更新，而其他模块将保持不变。这个过程是在运行时进行的，所以我们可以立即看到修改后的效果，而无需刷新浏览器。

3、保持应用程序状态：为了保持应用程序的状态和上下文，vite的hmr功能会尽力保留当前应用程序的状态。当模块发生变化时，vite会尝试将旧模块的状态应用到新模块上，以保证代码变更时不会丢失已有的数据或状态。

大致流程：就是vite server监听到文件变化，通过websocket向vite client发送通知，client根据通知内容解析，发起http请求获取更新后的文件，然后进行局部更新页面。

vite的代码目录结构：

src下面有两个文件夹client和node

开发时vite dev启动项目，其中也就是启动了一个node服务，当中有两个功能与hmr相关:

项目中有入口index.html文件，在实际请求时返回的html内容和实际在项目中写的内容并不相同:

<script type="module" src="/@vite/client"></script>

vite通过这种方式向我们的代码中注入vite client，当中有两个功能与hmr相关:

npm create vue@latest和npm init @vitejs/app创建的项目是自动处理的，无需编写额外的代码来启用hmr功能（自带开箱即用的模块热更新hmr支持）。

vite构建的项目中，默认情况下是启用了热模块更新饿。如果需要修改hmr相关配置，可以在vite的配置文件中（vite.config.js）中，对server.hmr进行配置。

如果需要禁用hmr：server: { hmr: false}

如果修改连接超时: server: { hmr: { timeout: 30000, overlay: false } }