什么是vite
vite是新一代前端构建工具，能够显著提升前端开发体验。他是使用rollup打包你的代码，是开箱即用的，同时也提供了丰富的插件api,带来了高度的可扩展性。可以构建vue，react 等项目
vite与webpack相比有什么优点(为什么选vite)
vite服务启动更快
webpack打包时必须优先抓取并构建你的整个应用，然后才能提供服务。所以对于大型项目当我们执行npm run serve时通常需要几分钟，即使是热更新甚至也需要几秒。
Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。依赖使用esbuild进行依赖预构建，源码就是我们代码中写的业务组件.vue,.ts文件等，是esmodule的形式，一方面浏览器可以直接解析esmodule,另一方面，我们可以通过动态导入，路由懒加载的方式，只有当路由跳转到对应页面才去加载该页面的资源
vite优缺点
主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现，完全归功于 Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。
1.快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。
2.打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；
3.热模块更新：在HRM热更新⽅⾯，当某个模块内容改变时，让浏览器去重新请求该模块即可，⽽不是像webpack重新将该模块的所有依赖重新编译；
vite优缺点：vite优点 -unbundle 机制的核心:
模块之间的依赖关系的解析由浏览器实现； 文件的转换由 dev server 的 middlewares 实现并做缓存； 不对源文件做合并捆绑操作； vite缺点：由于 unbundle 机制，首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比，Vite 把需要在 dev server 启动过程中完成的工作，转移到了 dev server 响应浏览器请求的过程中，不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。
不对源文件做合并捆绑操作，导致大量的 http 请求； dev server 运行期间对源文件做 resolve、load、transform、parse 操作； 预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止。
Vite 创建 vue3 项目
1.通过 npm init @vitejs/app 命令开始创建项目，创建完成后，切换项目目录，如 cd vite-vue3，通过 npm install 命令下载依赖，通过 npm run dev 命令启动项目
2.在使用 vite 创建的 vue3 项目中，如果想使用 jsx，如下所示：
通过 yarn add @vitejs/plugin-vue-jsx -D 命令下载插件
在 vite.config.js 中，引入 plugin-vue-jsx 插件，代码如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(), vueJsx()]
})
在 src 目录下创建 App.jsx，代码如下：
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return () => {
return <div>hello vue3 jsx</div>;
};
}
});
在 main.js 中，引入 App.jsx，代码如下：
import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')
创建完成后，切换项目目录，如 cd vite-vue2，通过 npm install 命令下载依赖，通过 npm run dev 命令启动项目
