第8回 - バンドラー
バンドラーとは？
Section titled “バンドラーとは？”JavaScriptにおけるバンドラーとは、複数のJavaScriptファイルやCSS、画像ファイルなどを1つまたは少数のファイルにまとめてくれるツールのことで、バンドラーがファイルをまとめる作業のことをビルドと言う。
また、ファイルをまとめる過程で、なるべくファイルサイズが小さくなるように整理整頓をしてくれるので、パフォーマンス向上に貢献してくれる。
バンドラーは以下の様な手法で、ファイルを最適化している。
コード圧縮（Minification）
Section titled “コード圧縮（Minification）”コード内のコメントや改行、空白を削除し、変数名を短くすることで、ファイルサイズを極限まで小さくする。
コード分割（Code Splitting）
Section titled “コード分割（Code Splitting）”共通で使われるコードや一部でしか使われないコードを分割して、必要な場所で必要なコードだけを読み込むことで、ファイルの実行時間を短くする。
コード変換（Transpiling）
Section titled “コード変換（Transpiling）”最新のJavaScriptやTypeScriptを、古いブラウザでも動くJavaScriptに変換する。
余分なモジュールの削除（Tree Shaking）
Section titled “余分なモジュールの削除（Tree Shaking）”importしたモジュール内で使用されていないモジュールなどがあれば削除することで、ファイルサイズを削減する。
なぜバンドラーが必要なのか？
Section titled “なぜバンドラーが必要なのか？”ESモジュールの仕組みで、ファイルを分割して読み込むことは可能になったが、読み込むファイルが増えてくると
- importで読み込むまでどんなファイルが必要なのか解析できない
- 読み込むファイルが多いとブラウザのページ読み込み速度が遅くなってしまう。
といった問題が出てくる。
また、npmでインストールするような現代のライブラリはimport Library from "library"のように1行で読み込んでいても、ライブラリの内部では数百個のファイルが読み込まれる可能性があるため、バンドルして1つのファイルにまとめておく方が読み込みが速くなる。
現代の流れとしては、
- 開発中は修正がすぐに反映されるように、ビルドせずに進める
- 読み込むファイル数は多くなるが、ローカル環境での通信なので遅さは気にならない
- 本番公開時には、ユーザー体験を良くするためにビルドしてまとめたファイルをアップロードする
といった形で使い分けるためにバンドラーを利用する。
主なバンドラー
Section titled “主なバンドラー”バンドラーはWeb開発に必須か？
Section titled “バンドラーはWeb開発に必須か？”Web開発の『規模』と『目的』による
現代のブラウザはESモジュールで分割したコードを読み込むことが可能なので、一概に「絶対必要」とも「不要」とも言えない。
ソースコードが肥大化しない学習用の小さなサイトやペライチの簡単なサイトの場合は、バンドラーの設定に時間をかけるよりも、そのまま書いた方がシンプルで速い場合もあるが、
一定程度以上のサイトの場合や、ユーザーに「待ち時間」というストレスを与えないように作ることが重視される場合はほぼ必須と言える。