バンドラー

バンドラーとは

バンドラーは、import/require で分割された複数の JavaScript モジュールを、ブラウザが読み込める 1 つまたは複数のファイル (バンドル) にまとめるビルドツールである。モジュールの依存関係を解決し、Tree Shaking (未使用コードの除去)、コード分割、ミニファイを行う。

主要なバンドラー

バンドラー	言語	特徴	用途
webpack	JavaScript	最も多機能、プラグインが豊富	大規模アプリ
Vite	JavaScript (内部で Rollup/esbuild)	開発サーバーが高速 (ESM ネイティブ)	モダンアプリ (推奨)
Rollup	JavaScript	ライブラリ向け、Tree Shaking が優秀	npm パッケージ
esbuild	Go	極めて高速 (webpack の 10〜100 倍)	ビルドツールの内部エンジン
Turbopack	Rust	Next.js 向け、Vercel が開発	Next.js

なぜバンドラーが必要か

ブラウザは import 文を解決できるが、数百のモジュールを個別にリクエストすると HTTP リクエスト数が膨大になる。バンドラーがモジュールを 1 つ (または数個) のファイルにまとめることで、リクエスト数を削減する。

開発時 (数百ファイル):
  src/index.ts → src/utils.ts → src/api.ts → ...

ビルド後 (数ファイル):
  dist/main.js (メインバンドル)
  dist/vendor.js (ライブラリ)
  dist/about.chunk.js (遅延読み込み)

Vite の仕組み

Vite は開発時とビルド時で異なるアプローチを取る。

開発時: ESM ネイティブ (バンドルしない)
  ブラウザが import を直接解決 → 変更したファイルだけ再読み込み (HMR)
  → 起動が数十ミリ秒

ビルド時: Rollup でバンドル
  Tree Shaking + コード分割 + ミニファイ → 最適化されたバンドル

バンドラーの主要機能

バンドラーは import/require の依存関係を解決するモジュール解決、未使用のエクスポートを除去する Tree Shaking、ルートごとにチャンクを分割するコード分割、変数名の短縮や空白除去によるミニファイ、デバッグ用のソースマップ生成、CSS・画像・フォントのアセット処理を行う。

webpack から Vite への移行

webpack の設定は複雑で、ビルド時間が長い。Vite は設定がシンプルで、開発サーバーの起動が圧倒的に速い。新規プロジェクトでは Vite が推奨される。

実践的な知識は関連書籍でも得られる。