什么是vite呢？
vite官网：vitejs.cn/guide/
简单总结：vite是一个基于浏览器原生 ES Modules 的开发服务器。在开发环境下基于浏览器原生ES Module开发，在生产环境下基于Rollup打包。支持热更新，并且热更新的速度不会随着模块增多变慢。
与webpack对比：
webpack：打包过程：1.识别入口文件2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）3.webpack做的就是分析代码。转换代码，编译代码，输出代码4.最终形成打包后的代码。webpack打包原理：1.先逐级递归识别依赖，构建依赖图谱2.将代码转化成AST抽象语法树3.在AST阶段中去处理代码4.把AST抽象语法树变成浏览器可以识别的代码， 然后输出递归识别依赖，构建依赖图谱。图谱对象就是类似下面这种：
那么vite呢？
用到的type = "module"的方式加载文件，这样以后在main.js里面就可以用esModule的方式进行组织和编译而且还不需要打包；这里我们可以一起看一下：
于是我们会发送vue和app.vue,然后当我们把这些东西加载过来之后，我们就可以直接创建应用程序在页面中显示，好处：不需要打包，不论项目有多大都不用打包，我们是按需加载。那么问题来了，浏览器只支持相对地址，它可以根据index的相对地址找到我们需要加载的main.js,但是它是真的不认识vue这个裸模块，那怎么办？我们的vue这个模块从哪来呢？这里它用了一个预打包的方式，把vue进行了一个预打包：
我们的vue从node_modules这个模块来的，vite在这里额外做了一件事，把我们需要的资源进行解析，转换，我们的app.vue变成了js
变成js之后我们看到的是一个真正的组件配置对象
render渲染函数，正常的逻辑，就可以做一个组件
3.依照vite原理，手写一个简单的vite demo
所以我们要写一个vite的话：第一步：把裸模块解析成相对地址，第二步就是对我们需要的vue的文件进行解析变成一个js。那我们开始吧：
