主角:vite 介绍 cn.vite.dev/
1. vite 底层依赖于esbuild和rollup
2.dev 环境 依赖于esbuild
1.依赖预构建
1.第三方依赖文件太大:node modules有的甚至几个G,如果不做处理可能，浏览器加载可能请求太多的问题；需要处理成模块文件，减少请求。
2.格式问题：每个第三方依赖格式各不相同,浏览器本身不支持commonjs等规范，只支持esmoudle,需要在使用前统一转换成esmoudle格式。
2.单文件编译(.jsx 或.tsc 或.vue等)
浏览器只能识别js。因此需要有.jsx=>js的语法转换过程,如果是.vue,还需要 vue格式转换的plugin 转成js语法。 esbulid转换的能力由vite插件实现。
3.代码压缩工具
压缩第三库文件大小,压缩效率比传统工具快上10-100倍
当然，Esbuild 作为打包工具也有一些缺点：
- 不支持降级到
ES5的代码。这意味着在低端浏览器代码会跑不起来。 - 不支持
const enum等语法。这意味着单独使用这些语法在 esbuild 中会直接抛错。 - 不提供操作打包产物的接口，像 Rollup 中灵活处理打包产物的能力(如
renderChunk钩子)在 Esbuild 当中完全没有。 - 不支持自定义 Code Splitting 策略。传统的 Webpack 和 Rollup 都提供了自定义拆包策略的 API，而 Esbuild 并未提供，从而降级了拆包优化的灵活性。
3.prod 生产环境 rollup [未来版本可能换成rolldown]
1生产环境 Bundle
虽然 ESM 已经得到众多浏览器的原生支持，但生产环境做到完全no-bundle也不行，会有网络性能问题。为了在生产环境中也能取得优秀的产物性能，Vite 默认选择在生产环境中利用 Rollup 打包，并基于 Rollup 本身成熟的打包能力进行扩展和优化，主要包含 3 个方面:
- CSS 代码分割。如果某个异步模块中引入了一些 CSS 代码，Vite 就会自动将这些 CSS 抽取出来生成单独的文件，提高线上产物的
缓存复用率。 - 自动预加载。Vite 会自动为入口 chunk 的依赖自动生成预加载标签
<link rel="modulepreload">。这种适当预加载的做法会让浏览器提前下载好资源，优化页面性能。 - 异步 Chunk 加载优化。在异步引入的 Chunk 中，通常会有一些公用的模块，如现有两个异步引入的
Chunk: A 和 B，而且两者有一个公共依赖 C一般情况下，Rollup 打包之后，会先请求A，然后浏览器在加载A的过程中才决定请求和加载C，但 Vite 进行优化之后，请求A的同时会自动预加载C，通过优化 Rollup 产物依赖加载方式节省了不必要的网络开销。
2.兼容插件机制
在开发阶段，Vite 借鉴了 [WMR]的思路，自己实现了一个 Plugin容器，用来模拟 Rollup 调度各个 Vite 插件的执行逻辑，而 Vite 的插件写法完全兼容 Rollup，因此在生产环境中将所有的 Vite 插件传入 Rollup 也没有问题。
