普段、何気なく使用している webpack や vite。
今まできちんと理解せずに使用していたなと思い、
今回はモジュールバンドラーとは何かについてまとめていきます。
モジュールバンドラーとは
そもそもモジュールバンドラーとは何でしょうか。
レバテックLABにて下記の記述がありました。
バンドラーとは、JavaScriptファイルやCSSファイル、画像ファイルなどの、静的アセットをまとめてバンドル化するツールです。主に、JavaScriptモジュールのバンドルに主眼が置かれていることから、モジュールバンドラーとも呼ばれます。また、単純にビルドツールと呼ばれることもありますが、表しているものはほとんど同じです。
なるほど。
その名の通り、モジュールをバンドルする（束ねる）もののようです。
各種ファイルをひとまとめにすることで、
通信時間や通信の回数を抑えることができ、
効率的に処理を実行できるのですね。
主な機能
ではモジュールバンドラーの主な機能をみていきましょう。
①モジュールの依存関係の解決
複数のJavaScriptファイル間の依存関係を解析し、それを適切な順序でまとめます。
フロントエンド開発では、JavaScriptファイルを小さなモジュールに分割し、
それらを必要な部品で組み合わせて使用する「モジュール化」が一般的な手法です。
モジュールバンドラーは、
そのモジュール化により読み込み時間が増え、
依存関係を把握しづらくなるといった問題を解決してくれます。
②トランスパイルと最適化
バンドルされたファイルを最適化し、コードのサイズを小さくします。
モジュールバンドラーは、
空白や改行、コメントの除去など最小化/圧縮処理、
TreeShakingといった最適化処理を行ってくれます。
また、ES6やTypeScriptなど、
モダンなJavaScriptの記法を古いブラウザ向けに変換します。
③アセットの統合
CSSや画像、フォントなどの非JavaScriptファイルも一緒にバンドルします。
JavaScriptファイルだけではなく、
アセットバンドルというプロセスを介して他のCSSや画像などもバンドルできます。
主な種類
ここまで、モジュールバンドラーについて学んできました。
ではどのような種類があるのでしょうか。
WebPack
最も広く使用されているモジュールバンドラー。
プラグインやローダーを使用してJavaScriptファイル以外もバンドル可能。
設定が複雑。
Parcel
設定不要なゼロコンフィグアプローチを採用し、不要な初期設定なし。
様々なアセットをバンドル可能。
Rollup
軽量でモダン。
コードの出力サイズを最小化することに優れている。
Vite
開発サーバーの起動が高速。
開発時と本番ビルド時に異なるアプローチ（Rollupを内部的に使用）を採用。
おわりに
今回はモジュールバンドラーの概要についてまとめました。
今度はそれぞれ個別の種類について調べ、
まとめたいなと思います。
それでは。
参考文献