💡 引言
在如今的前端面试和日常开发中，Vite 的名字可以说是如雷贯耳。大家都知道它"快"，知道它"基于原生 ESM"。
但是，如果面试官再往深处追问： "既然基于原生 ESM，那面对 npm 生态里堆积如山的 CommonJS 历史老包，Vite 是如何让浏览器不报错的？"、"它宣称的按需编译，到底在什么时候触发，编译了什么？"、"Vite 的插件为什么能无缝复用 Rollup 的生态？"
如果你对这些底层的组合拳还感到模糊，没关系。本文将用最纯粹、最直观的语言，为你彻底拆解这三大核心机制的幕后真相。
一、 破局历史包袱：Vite 如何处理 CommonJS 包？
核心结论： Vite 处理 CommonJS 包的核心逻辑是：开发环境 通过 esbuild 预构建将 CommonJS 转化为 ESM；而生产环境则是通过 Rollup 插件将 CommonJS 转化为 ESM。
1. 开发环境：esbuild 依赖预构建
在本地开发阶段，Vite 遇到 CommonJS 包时的整体处理流程如下：
- 依赖扫描 ：Vite 启动时会先扫描项目中的依赖，找出 CommonJS 相关的第三方包（例如：包的
package.json中main/exports/module字段指向的文件是 CJS 格式，或者代码中含有裸导入）。 - 格式重构 ：Vite 使用 esbuild 对其进行预构建，转换成 ESM 规范输出。在转换过程中，esbuild 会深度分析
require()调用和module.exports对象，将其精准映射成 ESM 的import和export语法。 - 写盘缓存 ：最终把转换后的产物输出成
node_modules/.vite/deps下的缓存文件，供浏览器直接加载。
2. 生产环境：Rollup 插件化处理
生产环境 Vite 采用 Rollup 进行整体打包，此时处理 CJS 包的逻辑转移到了插件层，主要通过 @rollup/plugin-commonjs 插件来实现：
- 全量扫描：Rollup 扫描项目中所有的依赖，精准识别未被预构建或代码中潜藏的 CJS 模块。
- 静态转换 ：该插件将 CJS 的独有语法（如
module.exports、exports、require）静态转换为标准 ESM 语法。 - 极致剪枝 ：转换完成后，进一步结合 Rollup 强大的 Tree-Shaking（树摇） 机制剔除无用代码，最终完美打包到生产产物中。
二、 极致性能的秘密：Vite 如何实现按需编译？
概念： Vite 按需编译的核心是基于浏览器原生的 ESM 与 WebSocket 文件监听 实现的。Vite 在开发阶段不会全量编译打包任何业务代码，只有当文件被修改或者首次请求时，才会触发编译，且编译粒度极致精准到单文件。
css
[浏览器解析 import] ──> [发起标准 HTTP 请求] ──> [Vite 服务器拦截] ──> [实时单文件编译] ──> [注入内存缓存并返回]1. "按需"的核心触发条件
浏览器原生 ESM 会自动解析代码中的 import 语句。每遇到一个未加载的模块，浏览器就会向 Vite 开发服务器发起一个新的 HTTP 请求。
- 这意味着，只有在当前页面真正运行、并执行到该导入语句时，请求才会发出。
- 内存缓存：编译后的文件会直接缓存到内存（Memory）而非磁盘中。后续如果发起相同的请求，Vite 将直接返回内存缓存，完美避免了重复编译。
2. 哪些文件会触发编译？
文件的编译主要可以划分为以下两大触发场景：
| 触发场景 | 涉及的核心文件类型 |
|---|---|
| 首次请求触发 | 入口相关文件 （如 index.html、main.js/main.ts）、业务代码文件 （.vue、.tsx、.jsx）、以及样式文件 （.css、.less、.scss）等。只要被页面 import，即刻触发。 |
| 文件修改触发 | 当本地文件发生改动时，Vite 监听并进行单文件重新编译，通过 WebSocket 精准推送更新。 |
三、 繁荣生态的基石：Vite 的插件体系规范
Vite 的插件体系并没有完全另起炉灶，而是选择直接继承了 Rollup 插件规范，并在此基础上扩展了一些 Vite 独有的专属钩子。
1. 完美继承：Rollup 核心结构与钩子
Vite 直接集成了 Rollup 插件的核心结构和生命周期，这使得开发者编写 Vite 插件的上手成本极低：
-
插件结构：Rollup 插件是一个返回对象的普通函数，Vite 插件完全沿用该标准结构。
-
核心构建钩子（Build Hooks） ：
resolveId：拦截并解析模块路径。load：负责加载模块的具体内容。transform：对模块代码进行核心转换（如将特定语法转为 JS）。
-
核心输出钩子（Output Generation Hooks） ：
generateBundle：在生成产物、打包结束前修改产物内容。writeBundle：在产物成功写入磁盘后进行后续处理。
💡 如何注册？ 无论是 Vite 专属插件还是 Rollup 兼容插件，直接在
vite.config.js的plugins数组中进行注册即可。
2. 特色增强：Vite 扩展的独有钩子
为了适应本地高效开发以及特有的开发服务器环境，Vite 额外扩展了以下专属生命周期钩子：
config：允许在插件内部修改或合并 Vite 的最终配置。configureServer：用于配置开发服务器（如添加自定义中间件、拦截特定的路由请求）。handleHotUpdate：专门用于自定义 HMR（热更新）的拦截与处理。
3. 与 Rollup 插件的兼容性如何？
- 高兼容度 ：由于 Vite 内部的
build（生产环境打包）阶段仍完全使用 Rollup，大部分只使用 Rollup 核心构建钩子的插件，可以直接在 Vite 中无缝使用。 - 需额外处理的情况 ：如果某些特定的 Rollup 插件深度依赖了 Rollup 独有的早期生命周期钩子（例如
moduleParsed模块解析完成钩子），由于 Vite 开发环境按需编译、不会全量解析的特性，这种插件在 Vite 中就需要进行额外的适配和处理。
📌 总结
Vite 的精妙之处在于既尊重历史，又拥抱未来。它通过双引擎（esbuild + Rollup）天衣无缝地抹平了 CommonJS 的历史鸿沟，借浏览器之手实现了真正的按需编译，同时近乎完美地继承了 Rollup 的庞大生态。理解了这三套组合拳，你在面对任何构建优化问题时都能游刃有余。