阅读本篇文章，将带你理解当我们控制台执行
run dev时，为什么vite可以编译得这么快，以vue为例子，手撕vite编译原理和如何编译vue sfc单文件组件。
课程目录
编译原理
我们创建一个vue项目并运行，打开控制台
从上图可以很快的发现，我们在打开项目时，浏览器自动发送了非常多的请求。仔细观察这些请求，所有都是在项目中的文件，准确的说是项目的入口文件、样式以及当前路由所引用的vue文件。
这就是vite在开发阶段可以做到秒打包的原因，vite其实做的不是真正的打包而是
假打包，在vite启动时，会从宿主文件进入即index.html，在index.html中会有这么一行代码
<script type="module" src="./main.js"></script>
type="module"这样做有2个好处:
- 在开发过程中，我可以直接运行代码且不需要打包，因此，无论多庞大的项目都可以很快的运行起来。
- ES模块的
import语法是运行时按需加载的，不需要用到的代码也不会浪费性能。 接下来看下请求是不是我们想象中的样子
浏览器会根据代码内引入的文件加载，请求对应的本地文件并执行
graph TD
main.js --> vue.js --> App.vue
但是还需要注意的是，浏览器只能加载相对路径的文件，类似于import { reactive } from vue;，这种加载模块的代码浏览器是无法识别的，因此在vite编译阶段，会对vue这种裸模块进行预打包，放到node_module目录下，并且将裸模块的地址替换成相对地址让浏览器可以正常加载模块。
- 观察这一行代码
- 经过vite编译之后，替换成相对路径
接下来看看.vue文件
已经完全变成了js文件，也就是说vite会将
.vue文件编译成js文件给浏览器识别
那么vite具体是如何做的呢，下一篇文章将一步步实现一个简单的mini vite
