Vite Server源码（todo）

vite是什么

根据官网上的介绍，Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

同时Vite 提供开箱即用的配置，它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

如何看vite源码

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

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

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

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

"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() ，这个函数

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

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

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

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

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

deveServer

前面说过vite由两部分构成，其中一部分就是开发服务器，它基于**原生 ES 模块** 提供了**丰富的内建功能**，更重要的是它的速度比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的指