Vite
简单易上手
vite内部集成了许多插件，不需要像webpack那样进行繁琐的配置，对新手开发者比较友好
no-bundle
Vite 是一个提倡 no-bundle 的构建工具，相比于传统的 Webpack，能做到开发时的模块按需编译，而不用先打包完再加载。
需要注意的是，我们所说的模块代码其实分为两部分，一部分是源代码，也就是业务代码，另一部分是第三方依赖的代码，即node_modules中的代码。所谓的no-bundle只是对于源代码而言，对于第三方依赖而言，Vite 还是选择 bundle(打包)，并且使用速度极快的打包器 Esbuild 来完成这一过程，达到秒级的依赖编译速度。
预构建
预构建的作用是解决vite基于esm下，第三方依赖采用的不是no-bundle模式，为啥？因为层级过深，哪怕是简单的使用了一个函数，也会导致import大量的文件，形成过多的网络请求，由于 谷歌浏览器对http并发请求数量的限制，导致浏览器会阻塞，导致页面加载非常缓慢。
总之，依赖预构建主要做了两件事情：
- 将其他格式(如 UMD 和 CommonJS)的产物
转换为 ESM 格式，使其在浏览器通过<script type="module"><script>的方式正常加载。 - 打包第三方库的代码，
将各个第三方库分散的文件合并到一起，减少 HTTP 请求数量，避免页面加载性能劣化。
- 在项目启动成功后，你可以在根目录下的
node_modules中发现.vite目录，这就是预构建产物文件存放的目录（自动开启） - Vite 将预构建相关的配置项都集中在
optimizeDeps属性上(手动配置)
entries通过这个参数你可以自定义预构建的入口文件。include决定了可以强制预构建的依赖项
在采用动态import的时候，vite会在运行时才识别到需要预构建的依赖，这时会触发二次预构建，但是二次预构建的成本也比较大。我们不仅需要把预构建的流程重新运行一遍，还得重新刷新页面，并且需要重新请求所有的模块。尤其是在大型项目中，这个过程会严重拖慢应用的加载速度！因此，我们要尽力避免运行时的二次预构建。具体怎么做呢？你可以通过include参数提前声明需要按需加载的依赖。
双引擎
我们都知道vite在开发环境使用esbuild打包，在生产环境用rollup打包。实际上完全是这样吗，或者说为什么要这样设计呢？
Esbuild
- 依赖预构建-作为Bundle工具
- 生产环境的代码压缩-作为Terser工具
- 单文件编译
Rollup
- 生产环境Bundle
- 兼容插件机制