バンドルってなんだっけとなったので調べました

はじめに

自分が今参画しているプロジェクト内でES buildが当たり前のように使用されていました。
これって何だろうかと調べるとバンドルツールの一種とのこと。
バンドルって何なんだっけ...!?となったので調べてまとめました。

バンドルとは

複数のファイルやモジュールを1つのファイルにまとめるプロセスのこと。
主にJavaScriptやCSSのようなWeb開発において使われる概念。
他の言語や環境でも使用されることがある。

バンドルされたコードってどんなの？

以下が実際にesbuildでバンドルされたコードの一部です。
どんな処理が書かれているのか全然わからないですね。

"use strict";var p6=Object.create;var vl=Object.defineProperty;var 
m6=Object.getOwnPropertyDescriptor;var f6=Object.getOwnPropertyNames;var
h6=Object.getPrototypeOf,v6=Object.prototype.hasOwnProperty;var fe=(e,t)=>()=>
(e&&(t=e(e=0)),t);var O=(e,t)=>()=>(t||e((t={exports:
{}}).exports,t),t.exports),Bo=(e,t)=>{for(var n in t)vl(e,n,
{get:t[n],enumerable:!0})},Lb=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof
t=="function")for(let i of f6(t))!v6.call(e,i)&&i!==n&&vl(e,i,{get:
()=>t[i],enumerable:!(r=m6(t,i))||r.enumerable});return e};var Re=(e,t,n)=>
(n=e!=null?p6(h6(e)):{},Lb(t||!e||!e.__esModule?vl(n,"default",
{value:e,enumerable:!0}):n,e)),Oe=e=>Lb(vl({},"__esModule",{value:!0}),e);var
Xn=O((Yye,Gb)=>{var
gl=Object.defineProperty,g6=Object.getOwnPropertyDescriptor,_6=Object.getOwnPrope
rtyNames,y6=Object.prototype.hasOwnProperty,_l=(e,t)=>gl(e,"name",
{value:t,configurable:!0}),x6=(e,t)=>{for(var n in t)gl(e,n,
{get:t[n],enumerable:!0})},b6=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof
t=="function")for(let i of _6(t))!y6.call(e,i)&&i!==n&&gl(e,i,{get:
()=>t[i],enumerable:!(r=g6(t,i))||r.enumerable});return
e},E6=e=>b6(gl({},"__esModule",{value:!0}),e),Bb={};x6(Bb,

なんでJavaScriptで使用されるのか？

JavaScriptは、Webブラウザで動作するクライアントサイドのスクリプト言語です。
複数のファイルがあるとWebブラウザがウェブページ表示するのに複数回のHTTPリクエストが必要となり動作が遅くなります。
バンドルツールによって複数のJavaScriptファイルを1つにまとめることでそういった問題を解消することができるため利用されています。

バンドルのメリット

パフォーマンスの向上

バンドルすることで複数のファイルを1つにまとめるため、サーバーとクライアント間のリクエスト数を減らすことができます。これにより、Webページの読み込み速度が向上します。

依存関係の管理

多くのプロジェクトは外部ライブラリやモジュールに依存しています。バンドルツールは、これらの依存関係を解析し、適切な順序で1つのファイルにまとめます。これにより、コードの管理が容易になります。

コードの最適化

バンドルツールは、コードを圧縮（ミニファイ）したり、使用されていないコードを削除したりする機能も持っています。これにより、ファイルサイズが小さくなり、Webページのパフォーマンスがさらに向上します。

バンドルのデメリット

バンドルはメリットばかりではないようです。
デメリットも理解して利用するかを検討すると良さそうです。

ビルド時間の増加

バンドルプロセスには時間がかかる場合があります。特にプロジェクトが大規模になると、ビルド時間が長くなり、開発速度に影響を与えることがあります。

初期ロードのパフォーマンス問題

バンドルされたファイルが非常に大きい場合、初期ロード時にクライアントが多くのデータをダウンロードしなければならないため、ページの表示速度が遅くなることがあります。この問題を回避するために、Code SplittingやLazy Loadingなど(ここはまだあまり分かっていないです。)のツールがあるそうです。

デバッグの難しさ

バンドルされたコードは通常、圧縮や難読化されているため、デバッグが難しくなることがあります。
特に、バンドルされたファイルが大きい場合や、多くの異なるモジュールが含まれている場合、問題の特定が困難になることがあります。

バンドルツールの例

• Webpack: 最も一般的なバンドルツールの1つで、JavaScriptやCSS、画像などさまざまなファイルをバンドルすることができます。
• esbuild: 高速で効率的なバンドルツールで、主にJavaScriptとTypeScriptのバンドルに使われます。
• Parcel: 設定なしで動作することを目指したバンドルツールで、シンプルなプロジェクトに適しています。

最後に

複数のファイルを自動でまとめて一つに最適化してくれるバンドルに関してまとめていて
居酒屋で退店時に食器を下げやすいようにまとめてから席を立つ非常にマナーのなっている学生時代の先輩を思い出しました。
バンドルしてくれたら、店員さんが席の片付けする時楽だよね。