最も効率的なマルチページRequireJSとアーモンドのセットアップ
RequireJSを使用しているサイトに複数のページがあり、ほとんどのページには独自の機能があります。それらはすべて、共通のモジュール（jQuery、Backboneなど）のホストを共有しています。それらのすべてには、独自のモジュールもあります。 r.js を使用してこのコードを最適化するための最良の方法は何でしょうか。 RequireJSとアーモンドのドキュメントと例のさまざまな部分で提案されているいくつかの選択肢があります-そこで私は次の可能性のリストを思いつきました、そしてどれが最も推奨されるか（または別のより良い方法があるかどうか）を尋ねています：
- アーモンド を使用して、サイト全体に対して単一のJSファイルを最適化します。これは一度ロードされてからキャッシュされたままになります。この最も単純なアプローチの欠点は、ユーザーがそのページに必要としない各ページコード（つまり、他のページに固有のモジュール）にロードすることです。ページごとに、読み込まれるJSはそれよりも大きくなります必要。
- ページごとに1つのJSファイルを最適化します。これには、共通モジュールとページ固有のモジュールの両方が含まれます。そうすれば、各ページのファイルにアーモンドを含めることができ、各ページに1つのJSファイルのみをロードできます。これは、サイト全体の単一のJSファイルよりも大幅に小さくなります。ただし、欠点は、共通モジュールがブラウザーにキャッシュされないことです。ユーザーがアクセスするページごとに、jQuery、Backboneなど（共通モジュール）の大部分を再ダウンロードする必要があります。これらのライブラリは、一意の単一ページのJSファイルごとに大部分を構成するためです。 （これは RequireJSマルチページの例 のアプローチのようですが、例ではアーモンドを使用していません。）
- 共通モジュール用に1つのJSファイルを最適化し、次に特定のページごとに別のJSファイルを最適化します。そうすれば、ユーザーは共通モジュールのファイルをキャッシュし、ページ間を閲覧するときに、小さなページ固有のJSファイルをロードするだけで済みます。このオプションには、RequireJS機能を含めるための2つの方法があります。
data-main構文または通常の<script>タグを使用して、すべてのページの共通モジュールの前にファイルrequire.jsをロードします。アーモンドはまったく使用しません。つまり、各ページには、require.js、共通モジュール、ページ固有のモジュールの3つのJSファイルがあります。 b。 this Gist は、最適化された各ファイルにアーモンドをプラグインする方法を提案しているようです----したがって、require.jsをロードする必要はありませんが、代わりに、両方の共通モジュールにアーモンドを含めます。私のページ固有のモジュール。そうですか？これは、require.jsを事前にロードするよりも効率的ですか？
これを実行するための最良の方法に関してあなたが提供できるアドバイスをありがとう。
あなたはあなた自身の質問にかなりはっきりと答えたと思います。
生産に関しては、私たちが行っているのと同様に、私が協力してきたほとんどの企業オプション3。
ソリューション3の利点と、それを使用する必要があると思う理由：
- ほとんどのキャッシュを利用し、すべての一般的な機能がロードされますonce。複数のページを閲覧するときに、トラフィックを最小限に抑え、読み込み時間を最速にします。複数のページの読み込み時間は重要であり、読み込み中の他のリソースと比較してあなたの側のトラフィックは重要ではないかもしれませんが、クライアントは読み込み時間が速いことを本当に感謝します。
- 通常、サイト上のほとんどのファイルが共通の機能を共有しているため、これは最も論理的です。
ソリューション2の興味深い利点は次のとおりです。
各ページに送信するデータは最小限です。ランディングページなど、多くの訪問者が1回限りの場合、これが最善の策です。変換指向のシナリオでは、読み込み時間の重要性を過大評価することはできません。
あなたの訪問者は繰り返しますか？ いくつかの研究 訪問者の40％が空のキャッシュを持っていることを示唆しています。
その他の考慮事項：
ほとんどの訪問者が単一のページにアクセスする場合は、オプション2を検討してください。オプション3は、平均的なユーザーが複数のページにアクセスするサイトに最適ですが、ユーザーが単一のページにアクセスし、それだけが表示される場合は、それが最善の策です。
あなたが持っているならたくさん JavaScriptの。一部をロードしてユーザーに視覚的な指示を与え、残りを非同期で（スクリプトタグインジェクションを使用して、またはすでに使用している場合はrequireを使用して）遅延してロードすることを検討してください。 UIで何かが「不格好」であることに気付いた人のしきい値は、通常、約100ミリ秒です。この例は、GMailの「読み込み中...」です。
HTTP接続がデフォルトでHTTP/1.1またはHTTP/1.0に追加のヘッダーがある場合、HTTP接続は Keep-Alive であるため、複数のファイルの送信は5〜10年前よりも問題が少なくなります。 HTTP /1.0クライアントのサーバーから
Keep-Aliveヘッダーを送信していることを確認してください。
いくつかの一般的なアドバイスと読み物：
- JavaScriptミニファイ は必須です。たとえば、r.jsはこれをうまく実行し、それを使用する際の思考プロセスは正しかったです。 r.jsも combines 正しい方向への一歩であるJavaScript。
- 私が提案したように、 defering JavaScriptも非常に重要であり、読み込み時間を大幅に改善できます。実行を延期すると、読み込み時間が長くなりますlook高速ですvery重要です。シナリオによっては、実際に高速に読み込むよりもはるかに重要です。
- can外部リソースのようにCDNからロードするものshould CDNからロードするjQueryのように今日人々が使用しているいくつかのライブラリはかなり入札されており（80kb）、キャッシュからそれらをフェッチすることは本当にあなたに利益をもたらす可能性があります。あなたの例では、not Backbone、underscore、jQueryをサイトからロードします。むしろ、CDNからロードします。
これらの3種類の最適化を示すために、サンプルリポジトリを作成しました。
r.jsの使用方法をよりよく理解するのに役立ちます。
参考までに、 https://github.com/requirejs/example-multipage-shim の例に従って、オプション3を使用することをお勧めします。
それが最も効率的かどうかはわかりません。
ただし、次の理由で便利だと思います。
- Require.configを構成する必要があるだけです（さまざまなライブラリーで1か所に）
- R.jsの最適化中に、共通としてグループ化するモジュールを決定します
MaxCDN のような任意のコンテンツ配信ネットワーク（CDN）を使用して、jsファイルがすべての人に確実に配信されるようにすることができます。また、jsファイルをhtmlコードのフッターに配置することをお勧めします。お役に立てば幸いです。
私はオプション3を使用することを好みます、そして私は確かにそれがなぜであるかをあなたに言うことができます。
- それは最も論理的です。
- それは最も多くのキャッシュを利用し、すべての一般的な機能は一度ロードされます。複数のページを閲覧するときに、トラフィックを最小限に抑え、読み込み時間を最速にします。複数のページの読み込み時間は重要であり、読み込み中の他のリソースと比較してあなたの側のトラフィックは重要ではないかもしれませんが、クライアントは読み込み時間が速いことを本当に感謝します。
私は同じためのはるかに良いオプションをリストしました。