Vite为什么这么快？
1.前言
对比之前，我们先要搞懂，vite与webpack的定位以及关系才可以。
那前端社区中常谈到的这些工具webpack、rollup、parcel、esbuild、vite、vue-cli、create-react-app、umi他们之间的关系：
- webpack、rollup、parcel、esbuild都是打包工具，代码写好之后，我们需要对代码进行压缩、合并、转换、分割、打包等操作，这些工作需要打包工具去完成。
- vue-cli、create-react-app、umi 是基于webpack的上层封装，通过简单的配置就可以快速创建出一个项目，把更多的时间放在业务开发上。
- vite开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包，并且充分利用了现代浏览器的特性，比如http2、ES module，vite是站在众多巨人肩膀上的一个产物， 类似webpack + webpack-dev-server的结合体，是一个非常棒的前端项目的构建工具。
2.webpack运行原理
Webpack 通过分析js中的 require 语句，分析出当前 js 文件所有的依赖文件，通过递归的方式层层分析后，得到整个项目的依赖关系图，对图中不同的文件执行不同的 loader，比如使用 css-loader 解析css代码，最后基于这个依赖关系图读取到整个项目中的所有文件代码，进行打包处理之后交给浏览器执行。这样就会带来一个问题，项目越大，需要打包的东西越多，启动时间越长。
3.ES module
在讲vite运行原理之前，我们先说一下ES module
目前，绝大多数现代浏览器都已经支持ES module了， 我们只需要在《script》标签中添加type="module"，就可以使用ES module了。
下面这段代码是可以直接在浏览器中运行的。
// test.js
export default function hello() {
console.log('hello world');
}
// index.html
<script type="module">
import hello from './test.js';
hello(); // hello world
</scirpt>
4.vite运行原理
在< script type="module">中，浏览器遇到内部的import引用时，会自动发起http请求，去加载对应的模块。
vite也正是利用了ES module这个特性，使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。
这样一来，首次启动项目（冷启动）时，自然也就比webpack快很多了，并且项目大小对vite启动速度的影响也很小。
总结
Vite 相比于 Webpack 之所以构建快是因为，Vite 借助新版本浏览器可以读懂模块化语法的特点，将项目中的模块化引入统一以一个又一个http请求的方式响应给浏览器，这样做的好处就是省去了 Webpack 构建过程中递归做依赖收集的耗时步骤，又因为Vite是开发环境的工具，绝大多数情况下我们不用不考虑兼容性，不会有人开发时还用老版本的浏览器吧
https://juejin.cn/post/7280747221510144054
https://juejin.cn/post/7283682738497765413?searchId=2024031316530257F0B85454B08B04556B#heading-2