CDN上の複数のファイルとローカルの1つのファイル

私のウェブサイトでは、jQuery、jQuery UI、prefixfree、いくつかのjQueryプラグイン、および独自のJavaScriptコードなど、約10のサードパーティJavaScriptライブラリを使用しています。現在、Google CDNやcloudflareなどのCDNから外部ライブラリをプルしています。私はより良いアプローチは何であるかと思っていました：

1. CDNから外部ライブラリをプルする（今日のように）。
2. すべてのファイルを1つのjsファイルと1つのcssファイルに結合し、ローカルに保存します。

説明されていれば、どんな意見でも大歓迎です。ありがとう:)

CDNの価値は、ユーザーが別のサイトに既にアクセスし、そのCDNから同じファイルを呼び出している可能性にあり、ファイルのサイズによってはますます価値が高くなります。これが当てはまる可能性は、要求されるファイルの遍在性とCDNの人気によって高まります。

これを念頭に置いて、人気のあるCDNから比較的大きく人気のあるファイルをプルすることは、絶対に理にかなっています。jQuery、および程度は低いがjQuery UIは、この要求に適合します。

一方、ファイルを連結することは、あまり変更されない可能性のある小さいファイルには意味があります。一般的に使用されるプラグインはこの要件に適合しますが、コアのアプリケーション固有のコードはおそらく適合しません。それを他のすべてのファイルと連結する場合は、ユーザーにすべてをもう一度ダウンロードさせる必要があります。

HTML5ボイラープレートは、これに対する一般的なソリューションを提供する上で非常に優れています。

1. Modernizrはローカルで先頭からロードされます。非常に小さく、インスタンスごとにかなり異なるため、CDNからソースを取得しても意味がなく、ユーザーを傷つけすぎてユーザーからロードすることはありません。サーバ。CSSがそれを利用している可能性があるため、頭に配置されています。そのため、ボディがレンダリングされる前にその効果を知っておく必要があります。その他のすべては一番下に配置され、重いスクリプトがロードおよび実行中にレンダリングをブロックするのを防ぎます。
2. CDNのjQuery。ほとんどの人がjQueryを使用しており、非常に重いためです。ユーザーは、サイトにアクセスする前にすでにキャッシュされている可能性があります。その場合、キャッシュから即座にロードされます。
3. 小さなサードパーティの依存関係と、あまり変更されそうにないコードスニペットはすべてplugins.js 、独自のサーバーからロードされたファイルに連結されます。これは、ユーザーが初めてアクセスしたときに遠くの有効期限ヘッダーでキャッシュされ、その後のアクセスでキャッシュから読み込まれます。
4. コアコードは、main.jsアプリケーションロジックが週から週、または月から月に変わる可能性があるという事実を説明するために、より近い有効期限ヘッダーを使用して入ります。これにより、ユーザーが2週間後にバグを修正したり、新しい機能を導入したりすると、上記のすべてのコンテンツをキャッシュから読み込むことができる一方で、これを新たに読み込むことができます。

他の主要なライブラリーについては、それらを個別に調べて、jQueryのリードに従うか、独自のサーバーから個別にロードするか、または連結するかを考えてください。これらの決定を下す方法の一例：

• Angularは非常に人気があり、非常に大きいです。CDNから取得します。
• Twitter Bootstrapも同様の人気レベルにありますが、そのコンポーネントの選択は比較的スリムであり、ユーザーがまだ持っていない場合、完全版をダウンロードする価値はないかもしれません。そうは言っても、それがコードの残りの部分に適合する方法はかなり本質的なものであり、サイト全体を再構築せずにそれを変更することはほとんどありません。そのため、ローカルでホストしたままにし、ファイルをファイルから分離したままにすることができます。メインplugins.js。このようにしてplugins.js、ユーザーにBootstrapコアのすべてをダウンロードさせることなく、常にBootstrap拡張機能を使用して更新できます。

しかし、絶対に必要なことはありません。走行距離はさまざまです。