这是我参与「第四届青训营 」笔记创作活动的第16天
昨天我们看了 Webpack 打包工具，Webpack 确实是目前前端开发中最常用的构建工具。但是近几年来也涌现出了一批新兴的构建工具，其中 Vite 还被称作 “下一代前端开发和构建工具”，今天我们就来看一看吧。
Vite 介绍
构建工具
上一篇文章我们就聊过这个问题了，所谓前端构建工具，就是负责编译代码、加载资源和打包项目的工具。比如我们前端开发经常使用到的TypeScript、JSX、Vue、Scss等文件，就需要构建工具来进行转换和编译。
Vite 是如何诞生的
随着现代前端工程的复杂化，构建工具需要处理的项目文件越来越多、模型越来越复杂，使用 Webpack 打包越来越显得力不从心，往往需要很长时间才能完成编译打包，在浏览器上显示出来，这对于前端开发的体验是极其不友好的。
因此，Vite 团队开始着手研发一款轻量化、高效率的构建工具，于是 Vite 诞生了。
Vite 实现原理
和 Webpack 进行对比，Vite 之所以能实现那么快的打包速度，有很大一部分原因是 Vite 利用了现在主流浏览器原生支持的 ESModule 模块化。
Webpack 的打包方式，是将所有原始模块的依赖关系全部梳理出来，然后将模块聚合为单个的 .js、.css等静态文件。
而 Vite 的做法是，在 ESM 的基础上定义了一套模块化的方法，既然浏览器已经原生支持模块化，那就没有必要去做聚合，完全可以保留模块之间的依赖关系，Vite 只需要将原始模块转化成符合浏览器原生 ESM 的模块即可，大大提高了打包效率。
Vite 特性
Vite 独有的一些特性功能有：
- 快速冷启动
- 模块热更新（HMR）
- 按需编译
- 配置丰富
- 支持多种语法
Vite 原生就支持许多如今前端开发常用的语法：
- TypeScript - 内置支持
- JSX、TSX
- Web Assembly
- 资源 URL 处理
- 模式选项和环境变量
其中 Vite 最核心的就是静态 Web 服务器和模块热更新 HMR 了。
快速上手
安装
使用 npm 命令就可以非常简单快捷的安装 Vite：
npm install vite
启动项目
在项目根目录使用以下命令就能启动 Vite 服务：
npx vite
打包
打包命令同样在项目根目录下执行：
npx vite build
npx vite preview
使用脚手架
当我们安装有 Vue 脚手架时，我们可以使用 Vite 命令快速创建一个 Vue3 + Vite 的项目，只需要短短三行命令：
npx create-vite-app my-vite-project
npm i
npm run dev
当然，Vite 也支持 React 等框架。
