Vite 原理浅析

Posted 2022-04-16 前端修罗场

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的执行可以分为三个步骤：

1. 构建: 确定从哪里下载该模块文件、下载并将所有的文件解析为模块记录

2. 实例化: 将模块记录转换为一个模块实例，为所有的模块分配内存空间，依照导出、导入语句把模块指向对应的内存地址。

3. 运行：运行代码，将内存空间填充。

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整个热更新过程可以分成四步：

1. 创建一个websocket服务端和client文件，启动服务
2. 通过chokidar监听文件变更
3. 当代码变更后，服务端进行判断并推送到客户端
4. 客户端根据推送的信息执行不同操作的更新

• 启动热更新：createWebSocketServer: 在 Vite dev server 启动之前，Vite 会为 HMR 做一些准备工作：比如创建websocket服务，利用chokidar创建一个监听对象 watcher 用于对文件修改进行监听等等。createWebSocketServer这个方法主要是创建WebSocket服务并对错误进行一些处理，最后返回封装好的on、off、 send 和 close 方法，用于后续服务端推送消息和关闭服务。

• 执行热更新：moduleGraph+handleHMRUpdate模块。接收到文件改动执行的回调，这里主要两个操作：moduleGraph.onFileChange修改文件的缓存和handleHMRUpdate执行热更新。moduleGraph 是Vite定义的用来记录整个应用的模块依赖图的类，除此之外还有moduleNode。moduleGraph是由一系列 map 组成，而这些map分别是url、id、file等与ModuleNode的映射，而ModuleNode 是 Vite中定义的最小模块单位。

• handleHMRUpdate: 主要是监听文件的更改，进行处理和判断通过WebSocket给客户端发送消息通知客户端去请求新的模块代码。

预编译原理

Vite预编译之后，将文件缓存在node_modules/.vite/文件夹下。根据以下地方来决定是否需要重新执行预构建。

• package.json中：dependencies发生变化
• 包管理器的lockfile

如果想强制让Vite重新预构建依赖，可以使用–force启动开发服务器，或者直接删掉node_modules/.vite/文件夹。