まず結論
バンドルとは、複数のJavaScriptやCSSを、ブラウザが読み込みやすい単位にまとめることです。
現代のWeb開発では、コードを1つの巨大なファイルに直接書くことはあまりありません。機能ごとにファイルを分け、必要なものを import して使います。
import { formatDate } from "./date.js";
import { openModal } from "./modal.js";
開発者にとっては読みやすい構成ですが、ブラウザへそのまま大量のファイルを配ると、読み込み管理が複雑になります。そこで、ビルド時に読み込みやすい単位へ整理します。これがバンドルです。
バンドラの役割
バンドルを行うツールをバンドラと呼びます。
代表例:
- Vite
- Webpack
- Rollup
- esbuild
- Turbopack
バンドラは、入口となるファイルから import をたどり、どのファイルが必要かを調べます。
main.js
-> app.js
-> user.js
-> api.js
-> style.css
この依存関係のつながりを見て、公開用のJavaScriptやCSSを作ります。
1つにまとめればよいわけではない
昔は、JavaScriptを1つのファイルにまとめることが多くありました。しかし、今は必ずしも「全部1つ」が正解ではありません。
理由は、最初の表示に不要なコードまで読み込むと遅くなるからです。
| まとめ方 | 特徴 |
|---|---|
| 1つにまとめる | 読み込み回数は少ないが、初回が重くなりやすい |
| 複数に分ける | 必要な時に読めるが、管理が複雑になる |
| ページごとに分ける | 初回表示を軽くしやすい |
この「どこまでまとめるか」を調整する考え方が、コード分割やチャンクです。
チャンクとは
チャンクは、ビルド後に生成される分割されたファイルの単位です。
dist/
index.html
assets/
main.abc123.js
vendor.def456.js
page-home.ghi789.js
vendor という名前が付く場合は、ライブラリ由来のコードがまとまっていることがあります。React、Vue、日付ライブラリなどです。
チャンクが細かすぎても、多すぎても問題になります。大事なのは、最初の表示に必要なものと、後から必要なものを分けることです。
バンドルで軽くなるもの
バンドルでは、単にファイルを結合するだけではありません。
- 使っていないコードを取り除く
- 空白やコメントを削る
- importの関係を整理する
- CSSをまとめる
- ファイル名にハッシュを付ける
ファイル名にハッシュが付くのは、キャッシュのためです。
main.abc123.js
中身が変わるとファイル名も変わるため、ブラウザが古いファイルを使い続ける問題を避けやすくなります。
バンドルで起きやすい問題
バンドルは便利ですが、問題の原因にもなります。
よくある症状:
- 本番だけJavaScriptが動かない
- 画像やCSSのパスが変わる
- ライブラリが大きくて初回表示が遅い
- 開発環境では動くがビルド後に落ちる
こういう時は、DevToolsのNetworkで生成されたJSやCSSが読み込めているか確認します。
実践メモ: バンドル後のファイル名は人間向けではありません。読むべきなのは、元コード、ビルドログ、Networkの読み込み結果です。
まとめ
バンドルは、開発中に分かれているファイルを、ブラウザが読み込みやすい形へ整理する工程です。
バンドラは依存関係をたどり、必要なコードをまとめ、必要に応じて分割します。ViteやWebpackを学ぶ前に、「importをたどって公開用ファイルを作る仕組み」と考えると理解しやすくなります。
