Frontend Academy · 课时

esbuild：速度与局限

将 esbuild 用作独立打包器，了解它为何比 webpack 快几个数量级，以及它在插件和类型方面当前存在的局限。

第 2 / 4 课15 个步骤

esbuild：速度与局限 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 esbuild

esbuild 是一个使用 Go 编写的打包器和压缩器。由于采用原生多线程且没有启动开销，它的速度比基于 JavaScript 的打包器快 10 到 100 倍。由 Evan Wallace（Figma）创建。

速度基准测试

打包 React 的源代码（约 6 MB）：esbuild 约 0.4 秒，Webpack 约 9 秒，Rollup 约 6 秒，Parcel 约 10 秒。速度优势来自：Go（编译型语言）、并行处理、各阶段之间无需转换 AST，以及简单的架构。

直接使用 esbuild

从 CLI 安装并运行。

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

编程式 API

在构建脚本中使用，以获得更多控制。

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

不使用 tsc 编译 TypeScript

esbuild 会移除 TypeScript 语法（将 .ts 转换为 .js），速度比 tsc 快得多。它不会进行类型检查——请单独运行 tsc --noEmit 来完成类型检查。

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

带热重载的开发服务器

esbuild 内置开发服务器，支持监视模式，并通过上下文 API 提供 HMR。

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

插件架构

esbuild 支持插件，主要有两个钩子：onResolve（拦截模块解析）和 onLoad（为已解析的模块提供内容）。

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

加载器

esbuild 内置以下加载器：js、ts、jsx、tsx、json、css、text、base64、dataurl、file、binary。CSS 支持仅限于打包（不支持模块和 PostCSS）——请使用插件或其他工具。

相较于 Rollup/Vite 的局限

1）插件生态较小。2）CSS 流水线功能有限——开箱即用不支持 CSS Modules、PostCSS 和预处理器。3）不为框架提供 HMR（React/Vue 等框架需要框架专用的 HMR）。4）没有 tree-shaking 警告或分析功能。5）处理复杂 SSR 配置时不够成熟。

esbuild 的优势场景

1）库打包（单一入口点、不依赖框架）。2）Lambda/Worker 打包（冷启动时间短）。3）作为 Vite/tsup 中的子工具（在底层用于 TypeScript 转换）。4）从 tsc 迁移到更快的 TypeScript 流水线。

其他工具中的 esbuild

Vite 使用 esbuild 进行开发环境中的 TypeScript/JSX 转换，并对 node_modules 进行预打包。tsup 使用 esbuild 进行库打包。Rollup 有一个 esbuild 插件。许多工具将 esbuild 的速度与自身的用户体验结合起来。

tsup——面向库的 esbuild 封装器

对于发布 npm 库，tsup 使用合理的默认设置封装 esbuild：生成 CJS、ESM 和 .d.ts，在开发时进行监视，并接受简单的配置。

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

打包体积的权衡

esbuild 的压缩速度很快，但压缩程度略低于 Terser。如果体积比构建速度更重要，可以在构建后再运行 Terser，以获得绝对最小的输出。

快速检查

esbuild 可以替代 tsc 来编译 TypeScript——但 esbuild 不会执行 tsc 会执行的哪项操作？

在交互式课程中回答

回顾：esbuild

基于 Go 的打包器，速度比基于 JS 的打包器快 10 到 100 倍。提供 CLI 和编程式 API。移除 TypeScript 语法（不进行类型检查——运行 tsc --noEmit）。插件钩子：onResolve 和 onLoad。局限：插件生态较小、CSS 流水线功能有限、不支持框架 HMR。最适合：库、Lambda/Worker，以及在 Vite/tsup 内部使用。发布 npm 库时使用 tsup 封装器。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「esbuild：速度与局限」课时是免费的吗？

是的 — 「esbuild：速度与局限」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「esbuild：速度与局限」这节课中我会学到什么？

将 esbuild 用作独立打包器，了解它为何比 webpack 快几个数量级，以及它在插件和类型方面当前存在的局限。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「esbuild：速度与局限」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy