前端工程化有关的问题，云哥之前面试也被问到了，当时没研究。那这么回答就好了
浏览器默认只能识别 JavaScript、HTML 和 CSS。我们使用的 Vue、React、TypeScript 等代码，浏览器是无法直接识别的，所以需要转换。
在 Webpack 中，这个转换是通过 loader 来实现的。loader 会将源代码解析成 AST（抽象语法树），然后对 AST 进行转换，最后生成浏览器可以识别的代码。
Vite 没有 loader ，Vite是通过插件系统plugins中的 transform 来实现代码转换，transform翻译成中文就是转换。transform 是 Vite/Rollup 插件系统中的一个核心钩子，它接收两个重要参数：
code：源文件的内容
id：文件的路径信息
通过code id 参数拿到源代码，那就可以通过一些规则转换了
Vite 内部已经内置了许多常见文件类型的转换，就是vite已经自动帮你转换了，比如 TypeScript、JSX、CSS 预处理器 sass less等。 这些标准文件的转换优先使用 esbuild 来处理，esbuild把源代码 > 流式解析 > 分解成token流 > 边解析边转换 > 然后直接生成目标代码
原因是：
esbuild 使用 Go 语言编写，比传统的 JavaScript 编写的工具（如 Babel、TSC）快 10-100 倍
esbuild 可以直接输出目标代码，不需要生成 AST 中间态，大大提升了性能
-
esbuild 支持并行处理，能够充分利用多核 CPU
对于其他文件类型的转换，就是我们从npm 上下载来的插件plugins，Vite 的 transform 提供了灵活的实现方式：
对于复杂的转换，比如我们安装的 Vue react 之类的plugins，可以使用 AST 方式，因为需要深度解析和转换代码结构
对于简单的转换，可以直接使用字符串替换处理，这样性能更好
这就是 Vite 在代码转换层面的核心实现原理
海云前端，提供1对1简历面试辅导，前端私教课(0基础培训)，项目难点笔记，语音咨询，模拟面试