vite -- 开发环境 热更新
热更新的目的和作用
目标是提高开发速度，能够在不重新加载整个页面的情况下快速更新页面内容。它可以实时反馈代码更改，避免了浏览器刷新带来的状态丢失和加载时间
什么是vite热更新?
热更新是指在开发过程中修改代码不需要刷新整个页面，能够即时更新浏览器页面
vite热更新怎么实现的？
vite通过以下几个关键机制实现了热更新
1、基于ES moudle的模块化更新
1.1、什么是ES moudle
ES Module（简称 ESM）是 JavaScript 的一种模块化机制。它是 ECMAScript 规范的一部分，旨在使 JavaScript 支持模块化的功能，能够导入和导出模块的代码。这意味着你可以将代码分成多个文件，并通过
import和export语法来加载和共享模块中的内容。
1.2、Vite 如何基于 ESM 实现热更新？
Vite 是一个现代的前端构建工具，它的热更新机制基于 ES Module。具体来说，Vite 会利用浏览器对 ESM 的原生支持来实现快速的模块热更新
1.2.1、模块按需加载，Vite 使用原生的 ES Modules 机制来加载应用中的模块。与传统的打包工具（如 Webpack）不同，Vite 不是在开发时对整个项目进行打包，而是将代码分割成多个模块，通过浏览器的原生 ESM 支持按需加载模块。
1.2.2、当你在浏览器中打开页面时，Vite 会直接使用原生 import 语法加载模块
1.2.3、这种方式允许浏览器动态地加载和替换模块，而不需要整个页面刷新
2、开发服务器与浏览器之间通过websocket连接
Vite 的开发服务器会通过 WebSocket 与浏览器保持连接。WebSocket 是一种在客户端和服务器之间建立的持久连接，使得服务器可以主动推送消息到浏览器
2.1、当文件发生变化时，Vite 会通过 WebSocket 通知浏览器。
2.2、浏览器收到更新后，Vite 会自动重新加载变动的模块，并将这些变动反映到页面上。
2.3、如果修改的是一个 JavaScript 模块，浏览器会通过 import 语句动态替换更新的模块。如果是 CSS 变动，浏览器会直接更新样式。
3、智能缓存
依赖的外部包的存储位置
存储在
node_modules/.vite目录下，这个目录中存储的是经过优化（如转译、压缩等）并且准备好供 Vite 使用的依赖文件
1、有时，缓存可能会导致一些问题（例如，依赖更新但缓存没有及时更新）。如果你需要清理缓存，可以手动删除 node_modules/.vite 目录，或者使用 Vite 提供的命令进行清理（如 vite --force）来强制重新构建缓存。
2、在浏览器请求时，会启动浏览器的强缓存
源码的存储位置
1、存储位置为开发服务器的内存中，而不是磁盘上
2、源码缓存的具体流程
- 文件变更检测：当开发者更改文件时，Vite 会监视源文件（如
.js、.ts）的变动，并对其进行编译。 - 编译后的文件存储在内存中：编译后的文件（比如 JavaScript 和 CSS）存储在开发服务器的内存中，而不是磁盘上。
- 浏览器请求：浏览器请求编译后的文件时，Vite 直接从内存中提供这些文件，并通过 HTTP 响应返回给浏览器。
- HMR 更新：如果代码发生变化，Vite 会通过 WebSocket 通知浏览器更新该模块（而无需刷新整个页面）。更新的模块也是通过内存中的编译结果来进行传输的。
4、实时反映变动
Vite 会通过 WebSocket 通知浏览器更新该模块（而无需刷新整个页面）。更新的模块也是通过内存中的编译结果来进行传输的。
Vite 如何监听到你的项目中文件的变动
Vite 使用了 Chokidar 这个高效的 Node.js 库来监听文件的变动。Chokidar 是一个专门设计用于处理文件系统变化的库，它能够快速、低开销地监听文件和目录的变化，支持跨平台
1、Chokidar 会监控项目中配置的源代码目录（通常是 src/）和静态资源文件夹（如 public/）
2、一旦文件发生变动（例如被修改、创建或删除），Chokidar 会发出事件通知 Vite 服务器。
3、Vite 会利用这些通知来触发文件的 增量编译 或 热模块更新。特别是在开发模式下，当你修改源代码时，Vite 会仅重新编译发生变化的文件，而不是重新构建整个项目，这样就能保证快速的响应和高效的开发体验。
Vite 开发服务器的监听流程
Vite 通过 Chokidar 监听文件变动，并结合 增量编译 和 ESM 热更新 机制，能够高效地检测和响应文件的变化。这种方式让 Vite 在开发过程中能够快速反馈变化，并保持高效的开发体验，而在生产环境中则专注于资源的优化和静态加载。在整个过程中，Vite 的设计思想是尽可能地避免重新构建未改变的部分，保证快速的开发效率。
Vite 的开发服务器是通过 server 来提供文件的监听和热更新支持。其工作流程大致如下：
-
启动开发服务器：Vite 启动一个基于 Node.js 的开发服务器，监听本地端口（默认是
3000）。同时，它会启动文件系统监听，默认情况下，它会监控项目中的src文件夹和其他资源文件。 -
Chokidar 监听文件变化：Vite 使用
chokidar监听项目中的文件变化。当文件被修改时，Chokidar 会触发事件，Vite 开发服务器会收到文件更新通知。 -
增量编译和热更新：当 Vite 接收到文件变动的通知后，它会重新编译已修改的文件，并通过 WebSocket 通知浏览器进行模块更新。
- 如果是 JS 文件或 Vue 组件的改动，Vite 会通过 HMR 将变动的部分推送给浏览器。
- 对于样式（如 CSS/SASS/LESS）的变化，Vite 会仅更新相关的 CSS 模块，而不进行页面刷新。
- 对于图片等资源，通常会触发浏览器的重新加载。
-
浏览器更新：通过 WebSocket，Vite 将变动的模块通知到浏览器，浏览器通过 HMR API 更新相应的模块。如果文件发生变化的是页面结构或样式文件，浏览器会局部刷新，而不会完全重载页面。