バンドラー

バンドラーとは

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

主要なバンドラー

主要なバンドラーを以下にまとめる。

なぜバンドラーが必要か

ブラウザーは 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 が推奨される。

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