備忘録です。
この動画面白かったので → https://www.youtube.com/watch?v=PuRqmz3Iq9M

バンドラーとは

バンドラーとは、バンドルするものです！！（クソ回答）

バンドル（bundle） の意味は「束ねる」です。before / after を見ると以下の感じです。

バンドル前

hogehoge1.js
hogehoge2.js
hogehoge3.js

バンドル後

hogehoge_all.js

１つのファイルに！！！！
なんとhogehoge_all.js にはバンドル前の3つのファイルの内容が全て書かれています。

なぜまとめるのか

1. 通信回数を減らすため

ブラウザがサーバーからファイルを取得するとき、ファイルが3つあれば3回リクエストが発生します。これが100ファイルあれば100回。まとめれば1回で済むので、ページの読み込みが速くなります。

2. 依存関係を解決するため

hogehoge2.js が hogehoge1.js の処理を使っているとき（関数を呼び出しているなど）、読み込む順番を間違えるとエラーになっちゃいます。（hogehoge2.jsで呼ばれた関数はどこにもないからおかしいぞ、的な.）
ファイル同士の依存関係を自動で解析して、正しい順番でまとめてくれます。ありがとう。

広義のバンドラーとは

上で説明したまとめるためのバンドラーは 狭義のバンドラー です。
最近では色々な文脈でバンドラーという言葉が使われています。

広義のバンドラーが内包している機能

機能	説明
バンドル	前述で説明してきた部分
トランスパイル	新しい `.js` を古い `.js` に変換。 `map` や `filter` 関数はJavaScriptのアップデートで追加されたメソッドで、全ブラウザでそのまま動くわけではない ※CSSでSafariだけまだ対応していないプロパティがあるのと同じような話そのため古い書き方に変換する。挙動は同じ
最適化	使っていない部分のコードを削除したり、不要な空白を削除したりして冗長な部分を良い感じにまとめてくれる
開発環境	`npm run dev` とかでローカルで動かせるようにするもの

広義のバンドラーの具体例

Vite
Turbopack（Next.js を入れると最初っからついてきます）

Turbopackはどう「バンドル」しているのか

みなさんが使っている Next.js に入っているバンドラーの Turbopack を元に説明していこうと思います。
Next.js を npmコマンドで install すると package.json に以下のコマンドが追加されます。

{
  "scripts": {
    "dev": "next dev", //Turbopackを使用して開発サーバーを起動しています
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

npm run dev コマンドが実行されると以下のように動きます。

.jsに変換
.tsx や .ts を .js に変換
バンドル
全ファイルを1つにまとめる
最適化
使っていない部分のコードを削除したり、不要な空白を削除したりして冗長な部分を良い感じにまとめてくれる
トランスパイル
新しい .js を古い .js に変換
開発環境の構築
localhost:3000 に反映
ソースコード変更の監視
npm run dev を実行した後にコードをいじるとブラウザの localhost:3000 に反映されるのは、ソースコードを変更するたびに変更差分に対して1〜5を裏側で繰り返してくれているから

バンドラーすごい

カフェ閉まるので帰る。