介绍
Vite 是一款快速、轻量级的前端构建工具，它旨在提高开发人员的开发效率和网站的性能。Vite 使用现代的 Web 技术，例如ES模块和原生的浏览器加载器，以提供快速的开发体验。
当使用 Vite 构建网站时，Vite 会将代码转换为 ES 模块，并通过 JavaScript 的动态导入功能将模块加载到浏览器中。这种方式在现代浏览器中得到了很好的支持，但是在老旧的浏览器中可能会出现一些兼容性问题。
兼容方法
为了解决这些问题，Vite 使用了几种兼容老旧浏览器的方法：
- 转换 ES 模块为 CommonJS 模块
Vite 可以将代码转换为 CommonJS 模块，这是一种在 Node.js 中广泛使用的模块系统。这种转换可以在老旧浏览器中使用，因为它不需要浏览器支持 ES 模块。
- Polyfills
Vite 使用了一些 Polyfills 来填补老旧浏览器中缺少的功能。Polyfills 是 JavaScript 代码片段，它们在浏览器中模拟出现在现代浏览器中的功能。例如，Vite 可以使用 core-js polyfill 库来提供一些 ES6 和 ES7 功能的支持。
- 浏览器兼容性
Vite 支持所有主流的现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。对于老旧的浏览器，Vite 会自动降级到使用传统的 JavaScript 加载器。
- 下面是其执行流程图：
兼容处理
从产物的命名中，我们就能多少看出些许区别，webpack 的产物比较简单，中规中矩，而 Vite 的 JS 文件不但比 webpack 多，而且部分文件命名中还多了一个单词：legacy。
在 Vite 的配置文件中，有一个名为 @vitejs/plugin-legacy 的插件，它的名字也包含 legacy，Vite 官网中对这个插件的解释是这样的：
“传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。 ”
也就是说，这个插件它不但提供了低版本浏览器的兼容能力，还提供了检测是否支持原生 ESM 的能力。
