vite原理
Vite 是一个由 Evan You（Vue 的作者）开发的前端构建工具，它的核心目标是 更快的开发启动速度和更高效的构建过程。理解 Vite 的原理，可以从两个核心阶段来看：
一、开发环境原理（Dev 模式）
🎯 核心理念：原生 ESM + 按需加载
Vite 利用现代浏览器对 ESM（ES Modules） 的支持，实现了即点即编译，无需像 Webpack 那样打包整个项目。
开发模式工作流程：
浏览器 <--(ESM)--> Vite Dev Server <--(transform)--> 源码
-
原生 ESM：
-
浏览器通过
<script type="module">加载模块。 -
Vite 不打包，而是通过 Dev Server 将模块按需返回。
-
-
模块按需编译（On-demand transformation）：
-
源码中的
.ts,.vue,.jsx文件会在请求时使用插件（如 esbuild、babel、vue 插件）即时转译为浏览器可识别的 JS。 -
改了哪个模块，就只重新编译该模块。
-
-
依赖预构建（Pre-bundling）：
-
Vite 在启动时用
esbuild对第三方依赖（如lodash,react）进行一次构建，转为 ESM 格式，加快后续加载。 -
缓存到
node_modules/.vite。
-
-
热更新（HMR）：
-
Vite 精准追踪模块依赖树，局部更新变动模块及其影响区域，速度极快。
-
二、生产环境原理（Build 模式）
🎯 核心理念：Rollup 打包优化 + Tree-shaking
Vite 的生产构建不是用 esbuild，而是用更成熟的 Rollup 来打包优化。
构建流程：
源码 --> 插件链处理（vite plugin）--> Rollup 打包优化 --> 输出静态资源
-
统一打包为多个 chunk（模块拆分）
-
支持 Tree Shaking（消除未使用代码）
-
资源压缩（JS/TS/CSS 图片等）
-
插件机制：兼容 Rollup 插件，同时支持 Vite 自定义插件
三、Vite 的优势总结
| 特性 | 描述 |
|---|---|
| 🚀 快速启动 | 不打包，冷启动极快 |
| ⚡ 极速热更新 | 模块级热更新，响应快 |
| 📦 预构建依赖 | 用 esbuild 构建依赖，比 babel/ts 快 10～100 倍 |
| 🔧 插件系统 | 兼容 Rollup 插件生态，自定义 Vite 插件也简单 |
| 🌍 ESM 原生支持 | 基于浏览器模块加载，不依赖打包器 |
| 📤 生产优化构建 | 使用 Rollup，生成体积优化的产物 |
四、技术选型对比
| 工具 | 开发模式 | 构建模式 | 特点 |
|---|---|---|---|
| Webpack | 先打包后运行 | Webpack 本身打包 | 功能全、插件多，但开发慢 |
| Vite | 即时加载 + esbuild | Rollup | 快速启动、构建更快 |
| Parcel | 零配置打包器 | 自带打包器 | 简单入门，但灵活性不如 Vite |