はじめに

これまで、なんとなくにしてきたバンドル、コンパイルについて理解したいと思い記事を書きます。

モジュール化

バンドルについて理解する前に、モジュールについて知る必要があります。
モジュールとは機能ごとに分割されたファイルのこと。
変数や関数が書かれたプログラムのことで、基本的には1ファイルのことをモジュールと呼びます。

元々JavaScriptはブラウザ上で動かすために生まれた言語のため、モジュール定義や読み込みがありませんでした。
モジュール化して開発を効率的にしたいよねーということで、誕生したのがCommonJSです。

CommonJS (require構文）

hogehoge.js

// エクスポート
module.exports = { hoge }

// インポート
const hoge = require('hoge')

JavaScriptの仕様を定めるプロジェクトであるCommonJSでサポートされている構文。
このCommonJSは、あくまでサーバーサイド上でのJavaScript仕様なので、ブラウザ上で動かすには、後述するwebpackなどで依存関係を解決する必要があります。

ESmodules (import/export構文）

hogehoge.js

// エクスポート
export const hoge = hogehoge

// インポート
import { hoge } from '.インポート先のパス'

ES2015(ES6)から言語仕様としてモジュールの仕組みが導入されました。
ただES2015に対応していないブラウザ（IEなど)で動かすには、
後述するBabelというコンパイルツールを使ってrequire構文に変換した後、webpackなどで依存関係を解決してあげる必要があります。

バンドル

上記のようなモジュール化したファイルの依存関係を解決して１ファイルに変換することです。
このバンドルするためのツールで広く使われているのがwebpackです。

webpack

webpackとはモジュールバンドラーツールです。
webpackを使うわなければ以下のように、記述が多くなりパフォーマンスの低下につながり、読み込む順番も気をつける必要があります。

index.html

//バンドラーを使わない場合
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
・　　・　　・

//バンドラーを使う場合
<script src="bundle.js"></script>

webpack公式より参照
このように依存関係のあるjsファイル、cssファイル、アセットの依存関係を解消し１つのファイルにまとめます。

Code Splitting
webpackにはCode Splittingという機能があります。
バンドルによって１つにまとめられたファイルはサイズが大きくなることがあり、ローディングに時間がかかってしまいます。
これを解消するのがCode Splittingです
コードをchunkという単位で複数に分割して、非同期的にローディングするため最初のロード時間を短くできます。

コンパイル

ES2015(ES6)ではモジュールの仕組みの導入以外にも
let,const,Promise,アロー関数,スプレッド構文など様々な仕様が追加されました。
しかしこれらの仕様に対応していないブラウザはまだまだあります。
そのため、ES2015を従来の環境でも動く古いJavaScriptに変換する必要があります。
この変換をコンパイルと言います。

Babel

BabelはES2015で書かれたJavaScriptをES2015以前のJavaScriptに変換するコンパイラーです。

最後に

簡単にではありますが、バンドル・コンパイルについてまとめてみました。
まだまだ、勉強中なので間違っていることや補足があればコメントください！！！