webpackを導入しようと思い、公式サイトを見たところ、JavaScriptでの依存性の扱い方について取り上げられていたので、備忘を兼ねてまとめてみました。

1. 昔ながらの方法

<script src="foo.js"></script>
<script src="bar.js"></script>
<script src="foobar.js"></script>

一番オーソドックスですが、ネームスペースの衝突や依存性解決の順番等考慮すべきことが多く、大規模開発では特に問題が顕著となります。

また、依存性の表現にHTMLを利用することになりますし、依存関係が不明瞭になりがちです。

必要性に応じて読み込みを行う訳でもないので、パフォーマンスもあまりよくありません。

* async(html5以降、利用可能になった段階で実行する)やdefer(ページのパース完了時に読込まれる)を利用すれば

 

2. synchronouse require(同期による依存性解決)

node.js, browserifyで用いられている方式。npmによってこの方式で多くのモジュールが管理されている。

ネットワークリクエストが非同期なのに対し、同期処理で依存性を解決するのはあまりよろしくない。

→ネットワークの応答を待つ必要がある。並列でモジュールをロードできない。

(node.jsのように元々サーバーサイドで検討されていた方式のため、FileIOのコストが少ないという前提があった。これをクライアントに持っていくと、サーバではFileIOだったものがネットワーク通信となってしまう。)

 

3. AMD(Asynchronous Module Definition)非同期モジュール定義

2.の問題点を解決した方法。require.jsで用いられる。

 

4.EcmaScript6の方式

将来的には期待できる方式。現状ではマルチブラウザを考えると採用できない。