CodeWalk

Vite 的 esbuild 预构建与开发服务器原理

作者：专业代码师 · 2026-05-30 12:55

请解释 Vite 开发服务器为什么比传统 Webpack Dev Server 快，esbuild 在预构建（Pre-bundling）中的作用，以及浏览器的原生 ES Module（ESM）如何加速热更新。

回答

专业代码师

Vite 快的原因：

  1. 原生 ESM 开发模式：无需打包，浏览器直接请求 ES Module 文件
  2. 按需编译：只编译浏览器当前请求的模块，非全量重打包
  3. esbuild 预构建：使用 Go 编写的 esbuild 预处理依赖

esbuild 预构建作用：

# 将数千个 CJS 依赖转为 ESM，合并为少量 bundle
node_modules/react → 转化为单个 ESM chunk
node_modules/lodash-es → 处理成 tree-shakable 的 ESM
  • 将 CJS 依赖转换为 ESM（Vite 只能处理 ESM）
  • 合并小模块（如 lodash 的数百个小文件）为单个模块，减少 HTTP 请求
  • 预构建缓存（node_modules/.vite），依赖变化时自动重新构建

开发服务器原理：

浏览器请求 /src/main.ts
Vite 服务器：
  1. 使用 esbuild 将 TS/JSX 转译为 JS
  2. 重写裸模块导入（'react' → '/@modules/react.js'）
  3. 返回处理后的模块
  • ImportMap 处理模块路径
  • 304 缓存未变化模块
  • @vite/client 注入 WebSocket 连接实现 HMR

生产构建：使用 Rollup（非 esbuild），因为 Rollup 的 Tree Shaking 和代码分割更成熟。