ビルド

ビルドとは

ビルド (Build) は、ソースコード (TypeScript, JSX) を実行可能な成果物 (JavaScript, HTML, CSS) に変換するプロセスである。トランスパイル、バンドル、最小化、型チェックを含む。

ビルドパイプライン

ビルドパイプラインを図で示す。

TypeScript → トランスパイル → JavaScript
JSX → トランスパイル → JavaScript
CSS Modules → バンドル → CSS
画像 → 最適化 → WebP
全体 → バンドル → チャンク分割 → 最小化 → 成果物

ビルドツール

主なビルドツールを以下にまとめる。

ツール	特徴	用途
Vite	高速、ESM ベース	開発サーバー + ビルド
esbuild	超高速 (Go 製)	バンドル、トランスパイル
SWC	超高速 (Rust 製)	トランスパイル
webpack	豊富なプラグイン	レガシー、複雑な設定
Turbopack	Rust 製、Next.js	Next.js の開発サーバー
tsc	TypeScript 公式	型チェック

ビルドの最適化

ビルドの最適化を以下にまとめる。

最適化	効果
Tree Shaking	未使用コードの除去
コード分割	ルートごとにチャンクを分割
最小化 (Minify)	変数名の短縮、空白の除去
圧縮 (gzip/Brotli)	ファイルサイズの削減
ソースマップ	デバッグ用のマッピング

package.json のスクリプト

package.json のスクリプトの例を示す。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit",
    "lint": "eslint .",
    "test": "vitest"
  }
}

SAM のビルド

SAM のビルドの例を示す。

sam build
# → .aws-sam/build/ に Lambda 関数のビルド成果物を生成
# → esbuild で TypeScript をトランスパイル + バンドル

ビルド時間の短縮

ビルド時間の短縮を以下にまとめる。

手法	効果
esbuild / SWC	webpack の 10〜100 倍高速
キャッシュ	変更のないモジュールをスキップ
並列ビルド	Turborepo でモノレポの並列ビルド
インクリメンタルビルド	変更ファイルのみ再ビルド

現場での応用を知るには関連書籍も役立つ。