web-dev-qa-db-ja.com

.jsファイルとCDNのバンドル

Webページのパフォーマンスを向上させるために、 [〜#〜] cdn [〜#〜] sを使用してWebページに.jsファイルを提供することをお勧めします。それは理にかなっている。

また、ロード時にサーバーに対して行われるリクエストの数を減らすために、.jsファイルをバンドルすることをお勧めします。

したがって、座って、CDNを使用するか.jsファイルをバンドルするかを決定する必要があります。

長所と短所は何ですか?どちらがより理にかなっていますか?

49
tugberk

なぜそれらをバンドルできないのですかそしてそれらをCDNに配置しますか?それはどちらか一方の決定ではないはずですか?

haveどちらかを選択する場合は、含める.jsファイルの数によって異なります。ファイルの数が少ない場合は、CDNの方が速いと提案します。ファイルの数が多い場合は、.jsのバンドルファイルは間違いなくより高速になります。切り替えが行われる場所は、実験するためのものです。

14
Matt

私の答え:両方。それらをバンドルしてCDNに配置します。

これを行うことの欠点は?依存します。ビルドプロセスはどのように見えますか?バンドルとミニファイを簡単に自動化できますか? YahooYUIやGoogleClosureなどを使用していますか?

また、GUIに依存するjQueryが多数ある場合は、要素/エフェクト/ cssが絶えず変化するため、時間のかかる摩擦が発生する可能性があります。

縮小化の癖がある可能性があるため、テストも重要です。

結論:1つのファイルにバンドルされた5つのJavaScriptファイルsafely=== 4つ少ないリクエスト。

プレーンな古いHTMLと1つの外部JavaScript参照=== 2つのサーバーへのリクエストを含むページ。ただし、サーバーへのCDN === 1リクエストにプレーンな古いHTMLと1つの外部JavaScript参照があるページ。

現在、Googleクロージャーツールを使用しています。 Google Closure Inspector は次のことに役立ちます。

Closure Compilerは、元のJavaScriptコードを変更し、元のコードよりも小さく効率的ですが、読み取りとデバッグが難しいコードを生成します。 Closure Inspectorは、コンパイルされたコードに対応する元のソースコードの行を識別するソースマッピング機能を提供することで役立ちます。

12
Kris Krause

あなたが考える必要があるいくつかのことがあります...

ページの読み込みの早い段階でJSをどれだけ読み込む必要がありますか?また、後でまでどれだけ遅らせることができますか?

JSの読み込みを遅らせる(たとえば、ページの下部に配置する)か、Google Analyticsのように非同期で読み込むことができる場合は、JSのダウンロードにかかるUIスレッドのブロックにかかる時間を最小限に抑えることができます。

JSの負荷をどのように分割できるかを理解した後、さまざまなJSファイルのマージ/縮小を処理します。HTTPリクエストを削減することがパフォーマンスを向上させるための鍵となります。

次に、CDNへの移行を検討し、CDNが圧縮されたJSコンテンツを提供できることを確認し、ヘッダーを設定して「永久にキャッシュ」されるようにします(永久にキャッシュする場合は、ファイルをバージョン管理する必要があります)。 CDNはレイテンシーの削減に役立ちますが、Cookieを使用しないことでサイズも削減します

考慮したい他のことは、静的コンテンツ用に別のドメインを設定し、それをサーバーにポイントして整理し、価値があると思われる場合はCDNに切り替えることです。

アンディ

1
Andy Davies

他の人がすでに述べたように、答えは可能であれば両方です。バンドル(および縮小)は、ページの重みを減らすため、ユーザーにメリットをもたらします。 CDNは、作業をオフロードするため、サーバーにメリットをもたらします。一般的に言って、パフォーマンスの問題を観察した場合、または他に何もすることがない場合を除いて、最適化する必要はありません。

0
jiggy