vite原理

Vite 是一个由 Evan You（Vue 的作者）开发的前端构建工具，它的核心目标是 更快的开发启动速度和更高效的构建过程。理解 Vite 的原理，可以从两个核心阶段来看：

一、开发环境原理（Dev 模式）

🎯 核心理念：原生 ESM + 按需加载

Vite 利用现代浏览器对 ESM（ES Modules） 的支持，实现了即点即编译，无需像 Webpack 那样打包整个项目。

开发模式工作流程：

浏览器 <--(ESM)--> Vite Dev Server <--(transform)--> 源码

1. 原生 ESM：

   • 浏览器通过 <script type="module"> 加载模块。

   • Vite 不打包，而是通过 Dev Server 将模块按需返回。

2. 模块按需编译（On-demand transformation）：

   • 源码中的 .ts, .vue, .jsx 文件会在请求时使用插件（如 esbuild、babel、vue 插件）即时转译为浏览器可识别的 JS。

   • 改了哪个模块，就只重新编译该模块。

3. 依赖预构建（Pre-bundling）：

   • Vite 在启动时用 esbuild 对第三方依赖（如 lodash, react）进行一次构建，转为 ESM 格式，加快后续加载。

   • 缓存到 node_modules/.vite。

4. 热更新（HMR）：

   • Vite 精准追踪模块依赖树，局部更新变动模块及其影响区域，速度极快。

二、生产环境原理（Build 模式）

🎯 核心理念：Rollup 打包优化 + Tree-shaking

Vite 的生产构建不是用 esbuild，而是用更成熟的 Rollup 来打包优化。

构建流程：

源码 --> 插件链处理（vite plugin）--> Rollup 打包优化 --> 输出静态资源

1. 统一打包为多个 chunk（模块拆分）

2. 支持 Tree Shaking（消除未使用代码）

3. 资源压缩（JS/TS/CSS 图片等）

4. 插件机制：兼容 Rollup 插件，同时支持 Vite 自定义插件

三、Vite 的优势总结

四、技术选型对比