JSのRequireJS / AMDでどのくらいの速度が得られますか？

Question

大規模なWebサイトで、requireJSは実際にどれくらい高速ですか？

非同期読み込みを使用する大規模なWebサイトと使用しないWebサイトの速度についてテストを行った人はいますか？

たとえば、多数のビュー（> 100）でBackboneを使用する場合、すべてのビューが一度に読み込まれ、その後常に使用できるビューオブジェクトを用意する方がよいでしょうか、それとも必要に応じてすべてを非同期で読み込む必要がありますか？

また、モバイルとデスクトップのこれらの考慮事項に違いはありますか？サイズではなく、モバイルでのリクエストのnumberを制限したいとのことです。

rharper · Accepted Answer

require.jsの目的が、すべてのスクリプトを本番環境で非同期にロードすることだとは思いません。 developmentでは、プロジェクトに変更を加えて「コンパイル」ステップなしでリロードできるため、各スクリプトの非同期ロードが便利です。ただし、productionでは、 r.jsオプティマイザーを使用してすべてのソースファイルを結合 1つ以上の大きなモジュールにする必要があります。。大規模なWebアプリがモジュールのサブセットのロードを後で（特定のユーザーアクションの後など）まで延期できる場合、これらのモジュールは個別に最適化して、本番環境で非同期にロードできます。

単一の大きなJSファイルと複数の小さなファイルの読み込み速度については、一般的に次のようになります。

「HTTPリクエストの削減」は、フロントエンドのパフォーマンスを高速化するための一般的な格言になりました。これは、今日のモバイルブラウザの世界（ブロードバンド接続よりも桁違いに遅いネットワークで実行されることが多い）にさらに関連する懸念事項です。 [参照]

ただし、次のような他の考慮事項があります。

モバイルキャッシュ： iPhoneはキャッシュするファイルのサイズを制限しますそのため、毎回大きなファイルをダウンロードする必要があり、多くの小さなファイルが作成されますより良いファイル。
CDNの使用法：jQueryのような一般的なサードパーティライブラリを使用する場合はあなたのサイトのユーザーはすでに別のウェブサイトからのキャッシュにそれを持っているかもしれないので、おそらくそれを大きな単一のJSファイルに含めず、代わりにCDNからロードするのが最善です（参照）。 詳細については、以下の更新を参照してください
遅延評価：AMDモジュールは、モジュールが必要になるまで解析+評価のコストを延期しながら、アプリのロード時にダウンロードできるように、遅延解析および評価できます。 this の記事およびそれが参照する他の一連の古い記事を参照してください。
ターゲットブラウザ：ブラウザはホスト名ごとの同時ダウンロード数を制限します。たとえば、IE 7は、特定のホストから同時に2つのファイルのみをダウンロードします。その他は4に制限され、その他は6に制限されます。 [参照]

最後に、 Steve Soudersによる良い記事がありますスクリプトの読み込みテクニックの束を要約しています。

更新：CDNの使用法について：Steve Souders 詳細な分析を投稿サードパーティライブラリ（jQueryなど）にCDNを使用する多くの考慮事項、長所と短所を識別します。

andy t · Answer

この質問はもう少し古いですが、私は自分の考えを追加するかもしれないと思いました。

R.jsを使用してすべてのコードを本番用に結合する点で rharper に完全に同意しますが、機能を分割する場合もあります。

シングルページアプリの場合、すべてをまとめることは理にかなっていると思います。ページの相互作用がある大規模でより伝統的なページベースのウェブサイトの場合、これは非常に面倒であり、多くのユーザーに多くの不要なコードをロードする結果になる可能性があります。

私が数回使用したアプローチは

コアモジュールを定義し（それらが正しく動作するためにすべてのページで必要）、これは単一のファイルに結合されます。
dOMの依存関係とモジュールへのパスを理解するモジュールローダーを作成する
on doc.readyは、特定のページで必要に応じて、拡張機能に必要なモジュールローダーと非同期ロードモジュールをループします。

ここでの利点は、最初のページの重みを低く抑えることです。ページの読み込み後に追加のスクリプトが非同期で読み込まれるため、知覚されるパフォーマンスが速くなるはずです。とは言うものの、この方法でロードされたすべての機能は、プログレッシブエンハンスメント（つまり、フォームのajax）としてアプローチする必要があります。これにより、ロードが遅い場合やエラーが発生した場合でも、基本的な機能を引き続き使用できます。