37

私たちは開発中に RequireJS と AMD を愛用しています。モジュールを編集し、ブラウザーでリロードを押して、すぐに結果を確認できます。しかし、本番環境でのデプロイのためにモジュールを 1 つのファイルに連結するときが来たら、AMD ローダーがまだ存在している必要があるようです。そのローダーが RequireJS 自体であろうと、その小さなパートナーである「アーモンド」であろうと、ここで説明されています。

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;
})();

これは、私が見る限り、AMD のセマンティクスを正しく再現し、不要なグルー JavaScript を最小限に抑えます。そのような連結子はありますか? もしそうでなければ、私がそれを書くべきだと考えるのはばかです — で書かれたシンプルでクリーンなモジュールで構成され、後でコードの非同期フェッチを開始する内部でのdefine()さらなる呼び出しをまったく必要としないコードベースは本当にほとんどないのでしょうか?require()

4

5 に答える 5

14

AMD オプティマイザには、ダウンロードするファイルの数以上を最適化する範囲があり、メモリにロードされるモジュールの数も最適化できます。

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

Page1 が 10 個のモジュールすべてを使用する場合、それは素晴らしいことです。しかし、Page2 が 1 しか使用しない場合はどうなるでしょうか? requireAMD ローダーは、モジュールが「d 」になるまで「ファクトリー関数」の実行を遅らせることができます。したがって、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 を作成する費用は、それが必要であると確信するまで節約できます。

詳細については、「requirejs のこれに対する最初の要求が必要になるまで、定義の実行を遅らせる」を参照してください。

于 2012-06-11T23:05:25.483 に答える
1

唯一の本当の利点は、セクション全体でモジュールを使用する場合です。そのため、モジュールを個別にキャッシュすることには利点があります。

于 2012-06-11T23:26:42.480 に答える
1

私も同じニーズを持っていたので、その目的のために、まさにそれを行う単純な AMD「コンパイラ」を作成しました。https://github.com/amitayh/amd-compilerで入手できます

多くの機能が欠けていることに注意してください。コードベースに自由に貢献してください。

于 2014-05-10T10:32:08.217 に答える
0

コードを require.js でコンパイルして実稼働用の 1 つの大きなファイルにする場合は、almond.js を使用してrequire.jsを完全に置き換えることができます。

Almond は、不要になったロード自体ではなく、モジュール参照管理のみを処理します。

アーモンドが機能するために課す制限に注意してください

于 2012-11-16T09:26:56.703 に答える
0

あなたが提案するようなビルド ツールが存在しない理由はありません。

前回* オプティマイザの出力を見たところ、モジュールは明示的に名前が付けられたモジュールに変換され、それらが連結されていました。ファクトリ関数が正しい順序で呼び出され、適切なモジュール オブジェクトが渡されることを確認するために、require 自体に依存していました。必要なツールを構築するには、モジュールを明示的に線形化する必要があります。不可能ではありませんが、より多くの作業が必要になります。それがおそらくそれが行われていない理由です。

オプティマイザには、require 自体 (または almond) をビルド ファイルに自動的に含める機能があるため、ダウンロードは 1 回で済みます。これは、必要なビルド ツールの出力よりも大きくなりますが、それ以外は同じです。

あなたが求めている種類の出力を生成するビルド ツールがあった場合、同期require、return の代わりの使用exports、およびその他の CommonJS 互換機能の場合は、より注意する必要があります。

※数年前の話です。2010年だと思います。

**しかし、今は見つからないようです。

于 2013-01-11T17:35:05.683 に答える