6

Minify、Uglify、Closureなどの縮小ツールを使用して、ページの読み込みを高速化したいと考えています。

私のプロジェクトは、いくつかのかさばるライブラリ（ jQuery、Bootstrap、...）に依存しています。

私は2つのオプションを検討しています：

オプション1：公式CDNを使用する

これは次のようになります。

<script src="(my cdn)/myproject.min.js"></script>
<script src="(official cdn)/jquery.min.js"></script>
<script src="(official cdn)/jquery-ui.min.js"></script>
<script src="(official cdn)/bootstrap.min.js"></script>

<link rel="stylesheet" href="(official cdn)/bootstrap.min.css"></link>
<link rel="stylesheet" href="(my cdn)/myproject.min.css"></link>

長所：

  • 訪問者は、別のWebサイトからの同じ公式CDNによって提供される、一部のライブラリのキャッシュバージョンをすでに持っている可能性があるため、冗長な転送を回避できます。

短所：

  • そうでない場合、このアプローチでは複数のHTTP呼び出しが必要になり（実際に呼び出したとしても、リクエストを行ってを取得します304 Not Modified）、これによりページの読み込み時間が長くなります。

オプション2：すべてをまとめる

  • プロジェクトファイルとすべてのライブラリのソースファイルを1つの巨大なファイルに縮小します。

これは次のようになります。

<script src="(my cdn)/myproject-and-libraries.min.js"></script>
<link rel="stylesheet" href="(my cdn)/myproject-and-libraries.min.css"></link>

長所：

  • 厳密な最小値に制限されたHTTP呼び出しの数。

短所：

  • ユーザーがすでに別のWebサイトからjQueryとBootstrapコードをロードしている場合でも、ユーザーはすべてのものを私のものからリロードする必要があります。

最後の注意

どちらの場合も、 AWS CloudFrontで自分のCDNから静的ファイル（自分でコンパイルしたもののみ）を提供するので、問題はCDNを使用するかどうか、またはどちらが優れているかではありません。

本当の問題は、サードパーティのライブラリを自分のものと一緒にパックするかどうかです。

4

1 に答える 1

3

場合によります。

すべてをまとめてパックし、ファイルサイズを測定して、個別のライブラリファイルと比較してどれだけのスペースを節約できるかを確認する必要があります。少なくとも、その節約を他の要因と比較することができます。

HTTPリクエストと合計バイトのバランスをどのように取るかはあなた次第です。多くのユーザーがモバイル接続を使用している場合、モバイル接続で発生する可能性のある余分な遅延のために、追加のHTTPリクエストがより懸念される可能性があります。

最近のブラウザの両方のオプションでは、HTTPリクエストは並行して行われると思います（古いブラウザでも、ドメインごとに一度に2つのHTTPリクエストを作成します）。モバイルブラウザについてはよくわかりません。

最初にサイトにアクセスしたときに、ライブラリCDNバージョンがすでにキャッシュされている可能性が高いユーザーの数を判断するのは困難です。思ったよりもユーザー数が少ないことを示唆するものを読んだことを覚えていると思います（おそらく、ユーザーの約25％がキャッシュしたYahooのデータ）が、参照が見つかりません。

さまざまなファイルが変更されると予想される頻度を検討する価値があります。独自のJavaScriptを毎週または2週間更新するが、ライブラリとプラグインを同じバージョンで数か月/数年保持する場合は、リピーターが1つの大きなファイルを再ダウンロードする必要がないように、これらのファイルを別々に保持する価値があります。独自のJavaScriptの1行を変更したという理由だけでパックされたファイル。

正直なところ、CloudFrontから既に縮小、gzip、サービスを提供している場合、人々があなたからファイルをダウンロードすると、とにかくすぐにダウンしてしまいます。また、各ユーザーが最初にサイトに空のキャッシュをアクセスすると、ファイルもキャッシュされます。全体として、これらのオプションの間に大きな違いは見られないと思います。

サードパーティのCDNの明確な欠点の1つは、問題が発生した場合に修正する権限がまったくないことです。

于 2013-02-14T12:13:07.283 に答える