为什么使用Vite
首先拿Webpack 来说，随着项目的迭代启动项目可能需都要几分钟的时间，热更新也会变慢可能需要十几秒。因为：
- 项目冷启动时必须递归打包整个项目的依赖树
- JavaScript 语言本身的性能限制，导致构建性能遇到瓶颈，直接影响开发效率 而 Vite 在开发阶段基于浏览器原生 ESM 的支持实现了模块的按需加载，另一方面借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译，从而能够有效提高开发效率。
除了开发效率，在其他三个维度上， Vite 也表现不俗。
- 模块化方面，Vite 基于浏览器原生 ESM 的支持实现模块加载，并且无论是开发环境还是生产环境，都可以将其他格式的产物(如 CommonJS)转换为 ESM。
- 语法转译方面，Vite 内置了对 TypeScript、JSX、Sass 等高级语法的支持，也能够加载各种各样的静态资源，如图片、Worker 等等。
- 产物质量方面，Vite 基于成熟的打包工具 Rollup 实现生产环境打包，同时可以配合
Terser、Babel等工具链，可以极大程度保证构建产物的质量。
环境搭建
首先需要搭建运行环境使用 node - v 查看是否安装了Node.js顺便检测Node.js版本，推荐 12.0.0 及以上版本。
项目创建
检测完环境没问题之后，就开始项目搭建，首先在终端命令行中输入 npm create vite 命令。
创建过程分为三步：
- 输入项目的名称
- 选择项目的框架（vue、react等）
- 选择使用的语言（vue为例可选vue/vue+ts）
项目运行
项目搭建完成之后，开始运行项目
// 进入项目目录 cd Name
// 安装依赖 npm install
// 启动项目 npm run dev
项目启动后可以看到如下界面
项目加载
vite项目的目录结构如下
.
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── favicon.svg
│ ├── index.css
│ ├── logo.svg
│ ├── main.tsx
│ └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts
vite中的根目录是index.html里面的内容如下
这个文件里面声明了一个type="module"的script标签，这个写法就等于请求了项目/src/main.js这个文件，Vite 的 Dev Server 接收到这个文件之后会读取对应内容，然后进行一些处理，处理完之后将结果返回到浏览器
Vite Dev Server 在读取到文件内容之后，会对文件内容进行编译，所以浏览器才能正确的执行，我们可以在浏览器的调试面板看到编译后的内容
在 Vite 项目中，一个import 语句即代表一个 HTTP 请求。上述两个 import 语句等于是两个请求， Dev Server 会解析本地文件，然后返回给浏览器，当浏览器遇到新的 import 语句又会发起新的请求直到全部加载完成。
现在我们应该了解了Vite为什么比Webpack快，因为Vite实现了开发阶段的Dev Server，进行模块的按需加载，而Webpack是先整体打包然后再加载，因此在开发阶段省略了耗时的打包过程。
