esbuild 鐐構優化

esbuild 是 Vite 预构建的核心，提供极速的编译能力。

esbuild 特点

特点	说明
Go 编写	原生二进制，速度快
并行处理	多核并行编译
内存高效	不生成中间 AST
功能简单	只做转译，不做分析

预构建流程

JavaScript

扫描依赖 → esbuild 编译 → 输出到 .vite/deps → 缓存元数据

速度对比

工具	编译 100KB	编译 1MB
Babel	1-2 秒	10+ 秒
TypeScript	0.5-1 秒	5+ 秒
esbuild	10 毫秒	100 毫秒

注意：esbuild 比 JavaScript 工具快 10-100 倍。

预构建输出

JavaScript

// CJS 依赖转换为 ESM
// lodash (CJS)
module.exports = { debounce }

// 预构建后 (ESM)
export { debounce }
export default { debounce }

esbuild 限制

功能	esbuild	Babel/TS
类型检查	✗	✓
emitDecoratorMetadata	✗	✓
自定义插件	有限	✓

预构建配置

JavaScript

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
      define: {
        'process.env.NODE_ENV': '"development"'
      }
    }
  }
})

小依赖合并

esbuild 将多个小依赖合并为单个 chunk：

JavaScript

// 多个小依赖
import a from 'lib-a'  // 5KB
import b from 'lib-b'  // 3KB

// 合并为单个 chunk
// deps/lib-a_lib-b.js (~8KB)

合并减少 HTTP 请求数量，提升加载效率。

性能优化技巧

text

export default defineConfig({
  optimizeDeps: {
    // 明确声明依赖，避免自动扫描
    include: ['vue', 'axios'],
    // 排除不需要预构建的依赖
    exclude: ['my-local-lib']
  }
})

要点总结

esbuild 用 Go 编写，速度极快
预构建将 CJS/UMD 转为 ESM
小依赖合并减少请求
功能有限，不做类型检查

📝 发现内容有误？点击此处直接编辑