一、vite是什么
是一种新型前端构建工具，能够显著提升前端开发体验。
由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
官网：https://vitejs.cn/guide/#scaffolding-your-first-vite-project
二、共同点
都是构建工具，用于资源打包
三、使用
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
注意： 需要 Node.js 版本 >= 12.0.0
四、启动方式
webpack原理
vite原理
由此可见：webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件，所以vite打包速度更快
五、差别
在HRM方面，当某个模块内容改变时，vite让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
六、过程
1.Vite 是基于 esbuild 预构建依赖的。当声明一个script标签类型为module时，浏览器将对其内部的import引用发起HTTP请求获取模块内容；
2.Vite 劫持了这些请求，并在后端进行相应的处理（如处理.ts文件为.js文件），然后再返回给浏览器；
3.由于浏览器只会对用到的模块发起 HTTP 请求，所以 Vite 没必要对项目里所有的文件先打包后返回，而是只编译浏览器发起 HTTP 请求的模块即可。也就实现了所谓的按需加载。
七、总结
vite 主要对应的场景是开发模式，唯一的缺点是相关生态没有webpack完善，vite可以作为开发的辅助。
