Vite的原理介绍及应用

Posted 2023-04-19

参考技术A

启动项目时，则是启动一个koa服务器，服务器拦截浏览器的es module的请求，服务器直接将 ESM 模块内容处理后，通过 path 找到目录下对应的文件做一定的处理最终以 ES Modules 格式返回给客户端。接着，现代浏览器通过解析 script module，对每一个 import 到的模块进行 HTTP 请求，服务器继续对这些 HTTP 请求进行处理并响应。（热更新）

图中的目标项目即我们开发时的项目，vite服务在解析模块路径以及读取文件内容时需要访问目标项目中的模块内容或者配置文件等。

从其他请求中我们也可以看出每一个.vue文件都被拆分成了多个请求，并通过type来标识是template还是style。

在项目根目录创建bin目录，并在bin目录下创建一个 www.js 文件，文件内容如下：

在创建 www.js 文件中引入了index.js文件，主要是使用了koa启动了一个简单服务以及实现vite的功能

serverPluginServeStatic.js文件 :使用koa-static中间件来托管静态资源，同时我们需要拿到koa实例（app），其次需要获取到目标项目的根目录路径（root），将目标项目进行整体托管，同时对于目标项目的 public目录也进行托管，这样，我们需要处理的静态文件基本完成了。

为什么要重写模块路径呢？
这是因为我们在使用import方式导入模块的时候，浏览器只能识别./、../、/这种开头的路径，对于直接使用模块名比如：import vue from \'vue\'，浏览器就会报错，因为它无法识别这种路径，这就是我们需要进行处理的地方了。

serverPluginModuleRewrite.js文件：

在处理完所有的模块路径之后，我们就需要在服务端来解析模块真实位置。

当 Vite 遇到一个 .vue 后缀的文件时。由于 .vue 模板文件的特殊性，它被拆分成 template , css ,script 模块三个模块进行分别处理。最后会对 script ,template, css 发送多个请求获取。

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

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/文件夹。