34

RequireJS を使用するサイトに複数のページがあり、ほとんどのページには独自の機能があります。それらはすべて、多数の共通モジュール (jQuery、Backbone など) を共有しています。それらにはすべて、独自の独自のモジュールもあります。r.jsを使用してこのコードを最適化する最良の方法は何だろうと思っています。RequireJS と Almond のドキュメントと例のさまざまな部分で提案されている多くの代替案を目にするので、次の可能性のリストを思いつき、どれが最も推奨されるかを尋ねています (または別のより良い方法があるかどうか)。 :

  1. Almondを使用して、サイト全体の 1 つの JS ファイルを最適化します。Almondは一度読み込まれ、その後はキャッシュされたままになります。この最も単純なアプローチの欠点は、ユーザーがそのページで必要としないコード (つまり、他のページに固有のモジュール) を各ページにロードすることです。ページごとに、読み込まれる JS が必要以上に大きくなります。
  2. 各ページに対して 1 つの JS ファイルを最適化します。これには、共通モジュールとページ固有のモジュールの両方が含まれます。そうすれば、各ページのファイルに Almond を含めることができ、各ページに 1 つの JS ファイルのみを読み込むことができます。これは、サイト全体の単一の JS ファイルよりも大幅に小さくなります。ただし、共通モジュールがブラウザにキャッシュされないという欠点がありますね。ユーザーがアクセスするページごとに、jQuery、Backbone など (共通モジュール) の大部分を再ダウンロードする必要があります。これらのライブラリは、それぞれの固有の単一ページ JS ファイルの大部分を構成するためです。(これはRequireJS マルチページの例 のアプローチのようですが、この例では Almond を使用していません。)
  3. 共通モジュール用に 1 つの JS ファイルを最適化し、次に特定のページごとに別の JS ファイルを最適化します。そうすれば、ユーザーは共通モジュールのファイルをキャッシュし、ページ間をブラウジングするときに、ページ固有の小さな JS ファイルをロードするだけで済みます。このオプションの中で、RequireJS 機能を含めるために、2 つの方法で仕上げることができます。Almond をまったく使用せずに、data-main構文または通常のタグを使用して、すべてのページの共通モジュールの前にファイル require.js をロードします。<script>つまり、各ページには、require.js、共通モジュール、およびページ固有のモジュールの 3 つの JS ファイルが含まれます。b. どうやらこの要旨最適化された各ファイルに Almond をプラグインする方法を提案しています ---- そのため、require.js をロードする必要はありませんが、代わりに共通モジュールとページ固有のモジュールの両方に Almond を含めます。そうですか？それはrequire.jsを事前にロードするよりも効率的ですか?

これを実行するための最良の方法について提供できるアドバイスをありがとう。

4

5 に答える 5

35

あなたは自分の質問にかなり明確に答えたと思います。

プロダクションについては、オプション 3を使用したほとんどの企業と同様に、そうしています。

ソリューション 3 の利点と、それを使用する必要がある理由を次に示します。

  • ほとんどのキャッシングを利用し、すべての一般的な機能が1 回読み込まれます。複数のページを閲覧するときに、トラフィックを最小限に抑え、読み込み時間を最速にします。複数のページの読み込み時間は重要です。読み込み中の他のリソースと比較して、あなたの側のトラフィックはそれほど重要ではないかもしれませんが、クライアントは読み込み時間の短縮を本当に高く評価します.
  • 通常、サイト上のほとんどのファイルは共通の機能を共有しているため、これは最も論理的です。

ソリューション 2 の興味深い利点を次に示します。

  • 各ページに送信するデータは最小限に抑えます。ランディング ページなどで多くの訪問者が 1 回限りの場合、これが最善の策です。変換指向のシナリオでは、ロード時間の重要性を過大評価することはできません。

  • 訪問者はリピーターですか？一部の調査では、訪問者の 40% が空のキャッシュを持っていることが示唆されています。

その他の考慮事項:

  • ほとんどの訪問者が 1 つのページにアクセスする場合は、オプション 2 を検討してください。オプション 3 は、平均的なユーザーが複数のページにアクセスするサイトに最適ですが、ユーザーが 1 つのページにアクセスし、それしか表示されない場合は、それが最善の策です。

  • JavaScriptが多い場合。その一部をロードしてユーザーに視覚的な指示を与え、残りを非同期的に (スクリプト タグ インジェクションを使用して、または既に使用している場合は require を使用して直接)​​ 遅延した方法でロードすることを検討してください。ユーザーが UI の「ぎこちない」ことに気付くしきい値は、通常約 100 ミリ秒です。この例は、GMail の 'loading...' です。

  • HTTP/1.1 ではデフォルトでHTTP 接続がKeep-Aliveであるか、HTTP/1.0 ではヘッダーが追加されているため、5 ～ 10 年前よりも複数のファイルを送信することは問題になりません。Keep-AliveHTTP/1.0 クライアントのサーバーからヘッダーを送信していることを確認してください。

一般的なアドバイスと読み物:

  • JavaScript の縮小化は必須です。たとえば、r.js はこれを適切に実行し、それを使用する際のあなたの思考プロセスは正しかったです。r.js は JavaScript も組み合わせており、これは正しい方向への一歩です。
  • 私が提案したように、 JavaScript を延期することも非常に重要であり、読み込み時間を大幅に改善することができます。実行を遅らせると、ロード時間が速く見えるようになります。これは非常に重要であり、シナリオによっては、実際にロードが速くなるよりもはるかに重要です。
  • 外部リソースなど、CDN からロードできるものはすべて、CDN からロードする必要があります。jQuery のように現在人々が使用している一部のライブラリは非常に高価 (80kb) であり、キャッシュからそれらを取得することは本当に有益です。あなたの例では、バックボーン、アンダースコア、jQuery をサイトからロードするのではなく、CDN からロードします。
于 2013-06-29T23:09:27.233 に答える
14

これら 3 種類の最適化を示すために、サンプル リポジトリを作成しました。

の使用方法をよりよく理解するのに役立ちますr.js。

https://github.com/cloudchen/requirejs-bundle-examples

于 2013-09-09T09:01:30.473 に答える
1

参考までに、 https://github.com/requirejs/example-multipage-shimの例に従って、オプション3を使用することを好みます

それが最も効率的かどうかはわかりません。

ただし、次の理由で便利だと思います。

  • require.config を構成するだけで済みます (さまざまなライブラリを 1 か所で)
  • r.js の最適化中に、どのモジュールを共通としてグループ化するかを決定します
于 2013-06-23T11:57:18.473 に答える
0

MaxCDNなどの任意のコンテンツ配信ネットワーク (CDN)を使用して、js ファイルが全員に配信されるようにすることができます。また、js ファイルを html コードのフッターに配置することをお勧めします。それが役立つことを願っています。

于 2015-05-10T06:14:04.930 に答える