esbuild：速度と制限事項
esbuildを単体のバンドラーとして使い、webpackより桁違いに高速な理由と、プラグインや型に関する現在の制限事項を理解します。
「esbuild：速度と制限事項」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 は tsc よりもはるかに高速に TypeScript の構文を除去し、.ts を .js に変換します。ただし、型チェックは行いません。型チェックが必要な場合は、別途 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 には、context API を通じて watch モードと 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 は、主に 2 つのフックを持つプラグインに対応しています。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 のサポートはバンドルのみです（CSS Modules、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 は開発時の TS/JSX 変換と node_modules の事前バンドルに esbuild を使用します。tsup はライブラリのバンドルに esbuild を使用します。Rollup には esbuild プラグインがあります。多くのツールが、esbuild の速度と独自の UX を組み合わせています。
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 は TypeScript のコンパイルで tsc の代わりに使えます。しかし、tsc が行い、esbuild が行わないことは何でしょうか。
まとめ：esbuild
Go ベースのバンドラーで、JS バンドラーより 10～100 倍高速です。CLI とプログラマティック API を利用できます。TS の構文を除去しますが、型チェックは行わないため、tsc --noEmit を実行してください。プラグインフックは onResolve と onLoad です。制限として、プラグインエコシステムが小規模、CSS パイプラインが最小限、フレームワーク向け HMR がないことが挙げられます。ライブラリ、Lambda/Workers、Vite/tsup 内での利用に適しています。npm ライブラリには tsup ラッパーを使用してください。
よくある質問
「esbuild：速度と制限事項」レッスンは無料ですか？
はい。「esbuild：速度と制限事項」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「esbuild：速度と制限事項」で何を学びますか？
esbuildを単体のバンドラーとして使い、webpackより桁違いに高速な理由と、プラグインや型に関する現在の制限事項を理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「esbuild：速度と制限事項」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。