组成
一个开发服务器，它基于原生ES模块 提供了丰富的内建功能，速度快模块热更新（HMR）。
一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
构建
Vite 提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。
- 开发环境：ESM+HMR:来实现模块的热更新;类似于webpack-server
- 生产环境：Rollup: 打包工具rollup的产生就是针对开发js库的,生成代码只是把我们的代码转码成目标js并无其他
Vite 核心原理
Vite其核心原理是利用浏览器现在已经支持ES6的import,碰见import就会发送一个HTTP请求去加载文件。Vite启动一个 connect 服务器拦截这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再以ESM格式返回返回给浏览器。整个过程中没有对文件进行打包编译。
Webpack是先解析依赖、打包构建再启动开发服务器，Dev Server 必须等待所有模块构建完成，当我们修改了 bundle模块中的一个子模块， 整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。
而 Vite利用浏览器对ESM的支持，当 import 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。
Vite 的快，主要体现在两个方面: 快速的冷启动和快速的热更新。而 Vite 之所以能有如此优秀的表现，完全归功于 Vite 借助了浏览器对 ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle 机制。
1.快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载，而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。
2.打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module，所以代码中不可以使⽤CommonJs；
3.热模块更新：在HRM热更新⽅⾯，当某个模块内容改变时，让浏览器去重新请求该模块即可，⽽不是像webpack重新将该模块的所有依赖重新编译；
开发阶段vite的速度远快于webpack，主要是因为：
webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。
Vite有如下特点：
- 快速的冷启动:
No Bundle+esbuild预构建 - 即时的模块热更新: 基于
ESM的HMR，同时利用浏览器缓存策略提升速度 - 真正的按需加载: 利用浏览器
ESM支持，实现真正的按需加载
webpack和vite的区别
- vite是go语言编写的，而webpack是原生js编写的，性能不如go语言（go语言操作是纳秒级别，而js是毫秒级别）
- vite利用了ES的modules，不需要打包，所以速度快
- webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译
- vite的主要优势就是快，缺点是相关生态还不完善
