esbuild #

什么是 esbuild？ #

esbuild 是一个极速的 JavaScript 打包器和压缩器，使用 Go 语言编写。它以惊人的速度处理 JavaScript 和 TypeScript 代码，比其他打包工具快 10-100 倍。esbuild 的设计目标是提供极致的构建性能，同时保持功能的完整性。

核心特点 #

特性	说明
极速构建	比 Webpack 快 10-100 倍
Go 语言编写	原生多线程，内存高效
原生 TypeScript	无需配置即可编译 TS
原生 JSX	支持 React/Preact 等
Tree-shaking	自动移除未使用代码
代码分割	支持动态导入和共享 chunk
插件系统	灵活扩展构建能力

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 esbuild：

1. 入门基础 #

主题	描述	文档链接
esbuild 简介	了解 esbuild 的特点、历史与应用场景	intro.md
基础使用	安装、命令行操作、API 使用	basics.md

2. 核心配置 #

主题	描述	文档链接
配置详解	入口配置、输出配置、模块处理	configuration.md
插件系统	插件开发与常用社区插件	plugins.md

3. 高级主题 #

主题	描述	文档链接
高级特性	代码分割、Tree-shaking、增量构建	advanced.md
最佳实践	生产环境优化、项目集成	best-practices.md

学习路径 #

入门阶段（esbuild 新手） #

了解 esbuild 的基本概念和优势
安装 esbuild 并运行第一个构建
掌握命令行基本操作
学习 JavaScript API 使用

进阶阶段（esbuild 熟练） #

深入理解配置选项
掌握 TypeScript 和 JSX 支持
学习 CSS 和资源文件处理
配置开发服务器和 Watch 模式

高级阶段（esbuild 专家） #

开发自定义插件
实现代码分割策略
优化生产环境构建
集成到现有项目

esbuild vs Webpack vs Rollup #

特性	esbuild	Webpack	Rollup
构建速度	极快	较慢	中等
配置复杂度	简单	复杂	中等
生态系统	发展中	成熟	成熟
Tree-shaking	支持	支持	优秀
代码分割	支持	优秀	支持
TypeScript	原生	需 loader	需插件

快速开始 #

bash

# 安装
npm install esbuild --save-dev

# 打包
npx esbuild src/index.js --bundle --outfile=dist/bundle.js

# 压缩
npx esbuild src/index.js --bundle --minify --outfile=dist/bundle.min.js

基本示例 #

javascript

// src/index.js
import { greet } from './greet.js';

console.log(greet('World'));

javascript

// src/greet.js
export function greet(name) {
  return `Hello, ${name}!`;
}

bash

esbuild src/index.js --bundle --outfile=dist/bundle.js

资源推荐 #

esbuild 官方文档：最权威的 esbuild 文档
esbuild GitHub：源码和问题反馈
Vite：基于 esbuild 的下一代前端工具

更新日志 #

2026-03-28：创建初始版本，包含完整的 esbuild 学习大纲

继续探索本指南，逐步掌握 esbuild 技术，提升前端构建效率！