请说说 Vite 的原理
Vite 有如下特点：
快速的冷启动: No Bundle + esbuild 预构建
即时的模块热更新: 基于 ESM 的 HMR，同时利用浏览器缓存策略提升速度
真正的按需加载: 利用浏览器 ESM 支持，实现真正的按需加载
Vite 相比于 Webpack 而言，没有打包的过程，而是直接启动了一个开发服务器 devServer。Vite 劫持浏览器的 HTTP 请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。
Vite 直接整合了 Rollup，为用户提供了完善、开箱即用的解决方案，在需要 bundle 打包的时候 Vite 使用 Rollup 内置配置。
ESM 是 JavaScript 提出的官方标准化模块系统，不同于之前的 CJS，AMD，CMD 等等，ESM 提供了更原生以及更动态的模块加载方案，最重要的就是它是浏览器原生支持的，也就是说可以直接在浏览器中去执行 import，动态引入需要的模块，而不是把所有模块打包在一起。
在使用模块开发时，其实就是在构建一张模块依赖关系图，当模块加载时，就会从入口文件开始，最终生成完整的模块实例图。
ESM 的执行可以分为三个步骤：
构建: 确定从哪里下载该模块文件、下载并将所有的文件解析为模块记录
实例化: 将模块记录转换为一个模块实例，为所有的模块分配内存空间，依照导出、导入语句把模块指向对应的内存地址。
运行：运行代码，将内存空间填充。
ESM 使用实时绑定的模式，导出和导入的模块都指向相同的内存地址，也就是值引用。而 CJS 采用的是值拷贝，即所有导出值都是拷贝值。
Vite 核心原理
Vite 其核心原理是利用浏览器现在已经支持 ES6 的 import,碰见 import 就会发送一个 HTTP 请求去加载文件。Vite 启动一个 connect 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以 ESM 格式返回返回给浏览器。整个过程中没有对文件进行打包编译。
Webpack 是先解析依赖、打包构建再启动开发服务器，Dev Server 必须等待所有模块构建完成，当修改了 bundle 模块中的一个子模块， 整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。
而 Vite 利用浏览器对 ESM 的支持，当 import 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。
目前所有的打包工具实现热更新的思路都大同小异：主要是通过 WebSocket 创建浏览器和服务器的通信监听文件的改变，当文件被修改时，服务端发送消息通知客户端修改相应的代码，客户端对应不同的文件进行不同的操作的更新。
Vite 通过 chokidar 来监听文件系统的变更，只用对发生变更的模块重新加载， 只需要精确的使相关模块与其临近的 HMR 边界连接失效即可，这样 HMR 更新速度就不会因为应用体积的增加而变慢。
热更新流程
Vite 整个热更新过程可以分成四步：
- 创建一个 websocket 服务端和 client 文件，启动服务
- 通过 chokidar 监听文件变更
- 当代码变更后，服务端进行判断并推送到客户端
- 客户端根据推送的信息执行不同操作的更新
(1)启动热更新：createWebSocketServer: 在 Vite dev server 启动之前，Vite 会为 HMR 做一些准备工作：比如创建 websocket 服务，利用 chokidar 创建一个监听对象 watcher 用于对文件修改进行监听等等。createWebSocketServer 这个方法主要是创建 WebSocket 服务并对错误进行一些处理，最后返回封装好的 on、off、 send 和 close 方法，用于后续服务端推送消息和关闭服务。
(2)执行热更新：moduleGraph+handleHMRUpdate 模块。接收到文件改动执行的回调，这里主要两个操作：moduleGraph.onFileChange 修改文件的缓存和 handleHMRUpdate 执行热更新。moduleGraph 是 Vite 定义的用来记录整个应用的模块依赖图的类，除此之外还有 moduleNode。moduleGraph 是由一系列 map 组成，而这些 map 分别是 url、id、file 等与 ModuleNode 的映射，而 ModuleNode 是 Vite 中定义的最小模块单位。
(3)handleHMRUpdate: 主要是监听文件的更改，进行处理和判断通过 WebSocket 给客户端发送消息通知客户端去请求新的模块代码。
预编译原理
Vite 预编译之后，将文件缓存在 node_modules/.vite/文件夹下。根据以下地方来决定是否需要重新执行预构建。
- package.json 中：dependencies 发生变化
- 包管理器的 lockfile
- 如果想强制让 Vite 重新预构建依赖，可以使用--force 启动开发服务器，或者直接删掉 node_modules/.vite/文件夹。