Vite是什么
不需要打包工具参与，利用浏览器对模块化的支持，实现vue的热更。具体体验怎样，可以简单截图一下
首先index.html这个样子，其中就是利用module，来解决模块化问题
主要的点就这么多，大概都学会了怎么使用了把，下面进去原理分析
原理分析
这块会从两方面分析，第一是热更，这也是vite主要做的，第二是build，build这块是使用rollup进行打包，用于正式环境，之所以这里还要提一下，是因为内部做的一些有意思的东西。
热更
其实热更的原理上面也将的差不多了，简单来说，就是客户端ws链接到服务端，服务端监听文件变化，然后分析变化以及依赖，尽量缩小变化的范围，然后发消息给客户端去请求新的文件进行hmr，例如vue组件template变化了或者style变化了，只有这种小范围的变化，客户端就去请求服务端，获取完资源文件会，会让vue组件重新渲染或者更新具体的style，这样就达到最小颗粒度的hmr，当然无法达到的时候，有个最后的降级，就是location.reload，哈哈哈
先说说vue组件，vue的hmr被内置了，但是在这里还是要说下。vue的sfc编译是在服务端的，服务端会把编译结果缓存起来，当客户端请求vue文件的时候，我们可以看到上面第二张图，render函数会挂载到script下面，同时把编译好的样式插到dom，样式都是带有唯一标识的和序号的，方便新增修改和删除，这里需要注意的是，我们知道sfc会被编译成三部分，分别是render、scirpt和style，这里请求服务器地址都是同一个vue文件，只是通过type标识来识别，type是template返回render，style返回样式，默认不带type是返回script，缓存这块服务器说了lru来缓存编译结果。
再说说依赖解析，其实这块vite在注释里面写的很清楚。正常vue文件变化，会触发组件的rerender，如果是js变化，我们就需要根据依赖图来觉得怎么去最小力度的hmr了。其中，怎么收集依赖，主要是两部分，第一是js文件import的依赖，第二是vue的script的import依赖，这块都会通过分析重写import来实现。在寻找js依赖的过程中，遇到vue依赖，塞到vue reload中，遇到js依赖，如果是hmr 边界最好，塞到js reload里面，没有就继续往上寻找，如果确实找不到hmr边界，就强制reload。其中hmr边界是用户hot.accept声明的，vite内部会通过ast分析取出依赖。
