> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/yuan-ma-jie-xi/vite-yuan-ma-jie-xi/vite-server-yuan-ma-todo.md).

# Vite Server源码（todo）

## vite是什么

根据[官网](https://cn.vitejs.dev/guide/#overview)上的介绍，Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

* 一个开发服务器，它基于 [**原生 ES 模块**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 提供了 [**丰富的内建功能**](https://cn.vitejs.dev/guide/features.html)，如速度快到惊人的 [**模块热更新（HMR）**](https://cn.vitejs.dev/guide/features.html#hot-module-replacement)。
* 一套构建指令，它使用 [**Rollup**](https://rollupjs.org/) 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

同时Vite 提供开箱即用的配置，它的 [**插件 API**](https://cn.vitejs.dev/guide/api-plugin.html) 和 [**JavaScript API**](https://cn.vitejs.dev/guide/api-javascript.html) 带来了高度的可扩展性，并有完整的类型支持。

## 如何看vite源码

vite是开源的，代码存放在在[github](https://github.com/vitejs/vite)上。直接看vite源码是很难看懂的，因为你无法直观地观察到调用栈和变量，我们可以效仿浏览器调试工具使用vscode调试工具来更直观地看源码。

vite的源码无法直接执行，但是我们可以调试编译后的代码，可以配合源码一起看，更好地理解。

```tsx
// 新建一个vite项目
npm create vite
// 选择好选项后安装依赖。
npm install
```

然后我们可以打开packages.json文件，在script中有三个指令。

```tsx
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},
```

这些指令其实是调用`node_modules/.bin`下的程序，我们可以在这个目录下找到`vite`和`vite.cmd`两个带有`vite`名称的程序，这两个程序分别是`linux`环境下和`windows`环境下`npm`执行`vite`所调用的程序。

不管你打开哪个程序，都可以看到这段语句：`node "xxx /../vite/bin/vite.js"` ，我们找到这个文件，它位于`node_modules\vite\bin\vite.js` 。这个文件里有一大段代码，其中有一个函数调用语句`start()` ，这个函数

```tsx
function start() {
  require('../dist/node/cli')
}
```

`node_modules\vite\dist\node\cli.js` 就是存放vite指令执行代码的文件了，找到你感兴趣的地方打上断点。

这个时候还不能直接调用vscode调试工具，需要配置一下，打开调试配置文件`Launch.json` ,在`configurations` 对象下添加：

```tsx
{
    "command": "npm run dev",  // 运行的指令，可以改成build等指令
    "name": "Run npm dev",   // 名称，随便改
    "request": "launch",  // 这个不用动
    "type": "node-terminal"  // 这个不用动
},
```

之后就可以按F5(开始调试快捷键)愉快地玩耍了！

## deveServer

前面说过vite由两部分构成，其中一部分就是开发服务器，它基于\*\*[原生 ES 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)\*\*  提供了\*\*[丰富的内建功能](https://cn.vitejs.dev/guide/features.html)\*\*，更重要的是它的速度比webpack要快得多。

根据官网的介绍，vite比webpack快有以下原因：

* **依赖预构建**。将代码分为依赖和源码两部分，依赖通常是不会变动的JavaScript，vite通过esbuild进行预构建。esbuild由go编写，速度比JavaScript编写的打包器预构建依赖还要快。
* **源码按需加载**。源码则是用户编写的代码，通常包含一些不是JavaScript的文件，需要转换。vite以ESM的方式提供源码，只有用到的模块才会被加载，而不是像某些打包工具那样将所有模块都打包成bundle。
* vite是以ESM为基础的，vite可以精确地找到变动的文件，热更新时只需要重新加载修改后的文件(通常是模块本身)，即可实现热更新，而没有变动的文件不会被重新加载。**也就是说通常情况下热更新时vite只会重新渲染变动的模块**。
* **使用HTTP缓存加速重新加载**。vite会让请求源码的HTTP使用协商缓存，请求依赖的HTTP使用强缓存。这是因为源码经常改变，而依赖通常不会变动。

### createServer

既然vite在开发时就相当是一台开发服务器，那么我们来找到创建这个server的代码。

顺着vite dev的指