Vite 为什么比 Webpack 快？它的工作原理是什么？

Vite 的两个核心阶段：

开发阶段（Dev Server）：

• 基于 ESM 的 No-Bundle：利用浏览器原生 ES Module 支持，直接按需加载
• 请求到达时，Vite 只对当前请求的文件进行即时编译（esbuild 转译 TypeScript/JSX）
• 不做完整打包，无需构建整个应用
• 依赖预构建：使用 esbuild（Go 编写）预打包 node_modules 中的 CommonJS/UMD 依赖，转为 ESM

// Webpack：启动时全量打包整个应用
// Vite：启动时只启动 server，按需编译请求的文件

对比 Webpack：

特性	Vite	Webpack
开发模式	无打包（ESM 按需加载）	全量打包（bundle）
冷启动	秒级（无需打包）	10s+（大型项目）
HMR 速度	模块级（esbuild 即时编译）	模块级（需重新打包）
转译工具	esbuild（Go，快）	Babel/ts-loader（JS，慢）
构建工具	Rollup（成熟高效）	Webpack
配置复杂度	简化（默认配置智能）	较复杂

构建阶段：

• 使用 Rollup 进行生产打包
• 预配置 Tree Shaking、代码分割、CSS 处理等
• 输出为传统 bundle 兼容所有浏览器

Vite 的优势总结：

• 开发服务器启动极快（无需打包）
• HMR 极快（仅更新变更模块）
• 利用 esbuild 高速转译
• 构建阶段利用 Rollup 的成熟生态