组成
为什么 vite 既用了 esbuild 又用了 rollup ?
esbuild 在开发阶段（vite dev）使用，主要用来预编译第三方依赖和编译业务代码里的 typescript 代码。esbuild 在抹平了第三方依赖的语法差异（第三方依赖不一定是 ESM 的语法）的同时，保证了 vite dev 的开发速度。
rollup 只会在 vite build 的时候执行构建，主要是构建生产环境可稳定使用的包，依然使用 rollup 是因为 rollup 成熟稳定，具有大量优秀的插件。
开发服务器
原理：浏览器支持 esm 模块
vite 在开发的时候不进行构建，只是将所有内容转换成 esm 的内容，依赖利用浏览器自己来识别，就和 live server 打开本地 index.html 文件一样。
比如 index.html 导入了一张图片，vite 就让浏览器去磁盘中图片本来的位置引入这个文件。而 webpack 开发时会执行构建，同样引入一张图片，因为构建，这张图片就会放在 index.html 同级的 img 文件夹中。
vite 通过浏览器这种原生识别 esm 的方式来处理依赖，还额外做了什么？
通过浏览器原生来构建可以，但是存在两个严重问题：
vite 在基于浏览器原生支持 esm 的基础上，解决了上述问题，提供了更便捷的方式。
总结：
浏览器原生支持 esm，更准确的说法是浏览器支持模块化，工程化。既然浏览器支持模块化，为什么我们还要将代码构建成 jQuery 开发时代的样子呢？显然是没有必要的。这就是 vite 和 webpack 最大的不同点。
vite 开发时，就像一个增强版的 live server，和我们平时打开 live sever 一样，入口文件是 html，html 里面引入的文件，让浏览器去解析引入。
而 webpack ，html 文件只是一个简单的模板，真正的入口是一个臃肿的 js 文件。开发时，浏览器打开的是前端没有工程化时期的标准项目结构。
