首先是为什么vue3推荐vite，vite的特点想必大家都耳熟能详了，我到现在都记得我第一次的时候用vite启动一个项目时的震撼，因为我是从github上面直接下载了一个完整的vue3管理后台项目，跑起来以后，因为当时对vue3还在学习阶段，但是已经对vite的大名早有耳闻，所以迫不及待的进行了热替换模块的尝试，那种感觉真的难以言表，就是厉害，没有其他感觉，不用等了，直接就好了，太drama了，从那个时候开始我就坚定了不管别人咋说，说啥，我自己vue2用的多好，都必须用vue3！！！
那现在我们直接开始从头来学：
首先是对vite也和vue2用的webpack类似，或者我自己感受就是也分为开发环境和线上生产环境打包两个模式
开发模式：
- 在本地开发模式下： vite是通过esbuild对我们项目中的依赖进行预构建，这是用go语言编写的，速度更快，这个是我没看文档的时候没想到的，我以为这块也是vue团队自己写的，哈哈哈，看来用好别人的轮子是多么重要
- 在本地开发模式下 ，vite用原生的ESM方式,这一步也是关键，这样变成了浏览器打开了项目后，由浏览器的请求来动态请求资源，而以前的打包方式构建则是每次进行构建后，再把项目源码提供给浏览器，这样的话，肯定是把浏览器打开页面的动作后置了，所以速度就没有vite快了
- 另外一点是热替换的时候，无论项目体积大小，都不需要重新构建并加载页面，而是只与其最近的hmr边界失活，并替换，这样就和应用大小无关了，同时，vite还利用了http来让浏览器为我们做更多事情，源码的请求是状态码304进行协商缓存，依赖模块则使用cache-control进行强缓存，
看完上面的，大概可以明白了vite的部分大致原理，把之前的打包构建工作让渡并节点滞后，这样开发人员初次启动本地环境的速度不说真实，最起码打开页面的体验是快了的，另外就是热替换hmr的时候是用上了http的协商缓存和强缓存，把依赖项和源码分开，也加速了，
生产环境：
- 强调一点生产环境打包，vite使用的是rollup，不是webpack也不是开发环境下的esbuild
- 那既然开发环境和生产环境的编译工具都不一样，那就面临一个棘手的问题，如何使开发环境和生产环境的输出和行为一致的问题，毕竟如果开发时候好好的，上了生产就不一样的表现肯定是要让我们开发人员抓秃头发的点哈哈哈，不用担心，vite附带了一套构建优化和构建命令，让我们能够在生产和开发中保持一致。
- 最后一点： 官方文档中并没有说以后也不考虑在生产环境使用esbuild，毕竟看起来esbuild的优点太多了，只是目前在代码分割和css处理上还不如rollup，
esbuild 预构建依赖
请看下面一个vue3的例子
如果我们install了一个依赖就比如 element-plus
import { ElConfigProvider } from "element-plus";
这个为啥能正确解析呢，因为esbuild！
哈哈哈我这个因为esbuild是不是有点废话了，开发模式下，都用的esbuild肯定是因为它啊，主要是因为使用了他的依赖解析和预构建，注意这是一个连贯动作，只有解析了才能预构建，他会这里的裸模块 element-plus解析，然后预构建为合法的URL，比如应该这里是：/node_modules/element-plus/ 我这里的路径是这个，是因为我使用的是pnpm
vite 对typescript的支持
这都不用考虑，毕竟vue3是用typescript编写的，那肯定这里的vite必须支持typescript
但是有不同点：vue3团队默认是把Typescript的类型检查由IDE或者构建过程完成的，
vite在这里的主要作用是转译但是这里需要对 tsconfig.json中的一些配置进行修改或者添加，使其与vue完美配合等
"target": "esnext", // typescript的目标版本
"useDefineForClassFields": true,
"isolatedModules": true, // 隔离modules
"module": "esnext",
"moduleResolution": "node",
// 跳过第三方库检查，解决打包失败
"skipLibCheck": true,
另外的就是如果我们在vite.config.ts中设置了一些路径别名
就是上图中的alias，这个时候我们也要在tsconfig.json中进行设置
我们正常的路径别名有报错就是这里需要同步
