☰

連結された RequireJS AMD モジュールにローダーが必要なのはなぜですか? 質問する

tag-icon • tag-icon javascript requirejs web-deployment amd almond
連結された RequireJS AMD モジュールにローダーが必要なのはなぜですか? 質問する

開発中は RequireJS と AMD が便利です。モジュールを編集し、ブラウザでリロードすると、すぐに結果が表示されます。しかし、実稼働環境での展開のためにモジュールを 1 つのファイルに連結する段階になると、どうやら AMD ローダーがまだ存在している必要があります。そのローダーが RequireJS 自体であるか、ここで説明されているようにその小さなパートナーである「almond」であるかは関係ありません。

http://requirejs.org/docs/faq-optimization.html#wrap

私が混乱しているのは、なぜローダーが必要なのかということです。require()モジュール内で呼び出しを行う必要がある非常に特殊な状況でない限り、一連の AMD モジュールはローダーがまったくなくても連結できると思われます。最も単純な例は、次のようなモジュールのペアです。

ModA.js:

define([], function() {
    return {a: 1};
});

ModB.js:

define(['ModA'], function(A) {
    return {b : 2};
});

これら 2 つのモジュールがあれば、連結子は単純に次のテキストを生成でき、RequireJS または Almond に必要な追加の帯域幅や計算によって運用サーバーやブラウザーに負担をかけないように思われます。

私は、次のような連結子を想像します (上記の 2 つのモジュールからのスニペットが挿入された場所を示すために、シェブロン引用符「,」を使用しています)。

(function() {
    var ModA = «function() {
        return {a: 1};
    }»();
    var ModB = «function(A) {
        return {b : 2};
    }»(ModA);
    return ModB;
})();

私の見る限り、これは、余分な JavaScript を最小限にして、AMD のセマンティクスを正しく再現します。このような連結器は利用できるのでしょうか。利用できない場合は、自分で作成するべきだと考えるのは愚かでしょうか。単純でクリーンなモジュールで構成され、後で非同期コード フェッチを開始する内部での呼び出しをdefine()必要としないコード ベースは本当にほとんどないのでしょうか。require()

ベストアンサー1

AMD オプティマイザーは、ダウンロードするファイルの数を最適化するだけでなく、メモリにロードされるモジュールの数も最適化できます。

たとえば、モジュールが 10 個あり、それを 1 つのファイルに最適化できる場合は、ダウンロードを 9 回節約できます。

Page1 が 10 個のモジュールすべてを使用する場合は問題ありません。しかし、Page2 が 1 個だけを使用する場合はどうなるでしょうか。AMD ローダーは、モジュールが 1 つになるまで「ファクトリ関数」の実行を遅らせることができますrequire。したがって、Page2 は 1 つの「ファクトリ関数」の実行のみをトリガーします。

各モジュールが実行時に 100kb のメモリを消費する場合require、ランタイム最適化を備えた AMD フレームワークでは、Page2 で 900kb のメモリも節約できます。

この例としては、「About Box」スタイルのダイアログが挙げられます。この場合、99% のケースではアクセスされないため、ダイアログの実行は最後の 1 秒まで遅延されます。例 (緩い jQuery 構文) :

aboutBoxBtn.click(function () {
    require(['aboutBox'], function (aboutBox) {
        aboutBox.show();
    }
});

必要であると確信できるまで、「About Box」に関連付けられた JS オブジェクトと DOM を作成するコストを節約できます。

詳細については、最初にrequireするまでdefineの実行を遅らせるrequirejs の見解についてはこちらをご覧ください。

おすすめ記事