正直なところ、RequireJS の利点がわかりません。UglifyJS を使用してすべてのファイルを縮小および連結し、結果の単一の JS ファイルを終了</body>
タグの直前に配置した場合でも、RequireJS を使用する必要がありますか? ページサイズに 15KB を追加する以外に、RequireJS には、UglifyJS では得られない利点がありますか?
4 に答える
requireJs を使用する主なポイントは、コードをモジュール化する適切な方法を用意することです。数千行のコードを含むアプリがあり、これをすべて 1 つのファイルで処理したくないとしましょう。したがって、それを異なるファイルに分割し始める場合は、すべての単一ファイルを正しい順序でロードする方法が必要です。確かに、20 個のスクリプト タグを作成し、それらが正しい順序になっていることを自分で確認できますが、コードが大きくなるにつれて、スクリプト タグをさらに追加する必要があり、すべてのファイルに対して適切な場所を見つける必要があります。これがrequireJsの良いところです。
C.jsに依存するB.jsに依存する3つのスクリプトA.jsがあるとしましょう
スクリプト タグを使用すると、次のようになります。
<script src="C.js"></script>
<script src="B.js"></script>
<script src="A.js"></script>
//A.js
console.log('A' + B)
//B.js
B = 'B' + C
//C.js
C = 'C'
})
requireJsで
<script src="require.js" data-main="A.js"></script>
そして、すべてのスクリプトで依存関係を宣言します。
//A.js
require(['B.js'], function (B) {
console.log('A' + B)
})
//B.js
define(['C.js'], function (C) {
return 'B' + C
})
//C.js
define([], function () {
return 'C'
})
これは非常に単純な例ですが、要点は、requireJs が正しい順序でモジュールをロードするため、モジュールの順序を気にする必要がないということです。
あなたの質問に戻ると、オプティマイザーはアドオンに近いので、単一のファイルに収まる小さなコードベースで、まだ保守可能な場合は、uglifyJs を使用してください。しかし、コードをモジュールに分割したい場合は、requireJs が最適です。
UglifyJS と RequireJS には非常に異なる目的があり、どちらも状況に当てはまる可能性があります。
RequireJS と一般的な非同期モジュール定義の背後にある考え方は、コードを小さなチャンクに分割して、管理しやすくすることです。パフォーマンスに関しては、主に次の 2 つの利点があります。
- 複数のチャンクを並行してロードできるため、ロードが高速になります
- 現在のコンテキストで本当に必要なコードの部分のみをロードするため、フットプリントが小さくなります
良い例はチャート ライブラリです。ブラウザーは、svg、vml、canvas など、さまざまな標準を使用してグラフィックスをレンダリングします。グラフ作成ライブラリには、これらの各標準のコードが含まれますが、実行時には、特定のデバイスとブラウザーに関連する部分のみが読み込まれます。
requirejs を使用すると、他のプログラミング言語と同じ開発プロセスを JS で行うことができます。
モジュールを作成すると、それらのモジュールを含むファイルを参照するだけで、これらのモジュールを他のプロジェクトで簡単に再利用できます。
最終的に、Web 用に作成する場合、requirejs にはオプティマイザがあり、モジュールを 1 つのスクリプトにまとめて醜くします。
サイトの各ページに 1 つのファイルを使用すると、コードの再利用が難しくなります。
すべてのページに同じコードをコピーして貼り付けたくはありません。ファイルもキャッシュされないため、ページの読み込み時間が大幅に増加します。