CDN上の複数のファイルとローカルの1つのファイル
私のWebサイトでは、jQuery、jQuery UI、prefixfree、いくつかのjQueryプラグイン、および独自のJavaScriptコードなど、約10個のサードパーティのJavaScriptライブラリを使用しています。現在、Google CDNやcloudflareなどのCDNから外部ライブラリを取得しています。私はより良いアプローチが何であるか疑問に思っていました：
- CDNから外部ライブラリをプルする（今日のように）。
- すべてのファイルを単一のjsファイルと単一のcssファイルに結合し、ローカルに保存します。
説明されている限り、意見を歓迎します。ありがとう：）
CDNの価値は、ユーザーがそのCDNから同じファイルを呼び出す別のサイトを既に訪問している可能性にあり、ファイルのサイズに応じてますます貴重になります。これが事実である可能性は、要求されているファイルの遍在性とCDNの人気によって増加します。
これを念頭に置いて、人気のあるCDNから比較的大きく人気のあるファイルを取り出すことは、理にかなっています。 jQuery、および程度は低いがjQuery UIはこの法案に適合します。
一方、ファイルを連結することは、あまり変更されない可能性のある小さなファイルには意味があります。一般的に使用されるプラグインはこの法案に適合しますが、アプリケーション固有のコアコードはおそらく適合しません。それを他のすべてのファイルと再度連結すると、ユーザーにすべてをすべて再度ダウンロードさせる必要があります。
HTML5ボイラープレート は、このための一般的なソリューションを提供する上でかなり良い仕事をしています：
- Modernizrはローカルからロードされます：非常に小さく、インスタンスごとに大きく異なるため、CDNからソースを作成することは意味がなく、ユーザーからロードするのにあまり害はありませんサーバ。 CSSがそれを利用している可能性があるため、頭に入れられます。そのため、ボディがレンダリングされる前にエフェクトを知っておく必要があります。重いスクリプトがロードおよび実行中にレンダリングをブロックするのを止めるために、他のすべては一番下に行きます。
- ほとんどすべての人がそれを使用し、それは非常に重いため、CDNからのjQuery。ユーザーはおそらくあなたのサイトにアクセスする前にすでにキャッシュされているでしょう。その場合、彼らはすぐにキャッシュからそれをロードします。
- あまり変更されない可能性のある小規模なサードパーティの依存関係とコードスニペットはすべて、自分のサーバーから読み込まれた
plugins.jsファイルに連結されます。これは、ユーザーが最初にアクセスするときに遠い有効期限ヘッダーでキャッシュされ、後続のアクセスでキャッシュからロードされます。 - コアコードは
main.jsに入り、アプリケーションロジックが週ごとまたは月ごとに変更される可能性があるという事実を説明するために、より近い有効期限ヘッダーを使用します。これにより、ユーザーが2週間後にバグを修正したり、新しい機能を導入したりした場合、上記のすべてのコンテンツをキャッシュから取り込むことができますが、これは新たに読み込まれます。
他の主要なライブラリについては、それらを個別に確認し、jQueryのリードに従うか、独自のサーバーから個別にロードするか、連結するかを自問する必要があります。これらの決定にどのように取り組むことができるかの例：
- Angularは非常に人気があり、非常に大きいです。 CDNから入手してください。
- Twitter Bootstrapも同様の人気がありますが、そのコンポーネントは比較的スリムに選択されており、ユーザーがまだ持っていない場合は、完全にダウンロードする価値はないかもしれません事。そうは言っても、コードの残りの部分に収まる方法は非常に本質的であり、サイト全体を再構築せずに変更することはほとんどありません。したがって、ローカルにホストしたまま、ファイルをメイン
plugins.js。これにより、Bootstrapコアのすべてをユーザーに強制的にダウンロードさせることなく、Bootstrap拡張機能でplugins.jsを常に更新できます。
しかし、必須ではありません-あなたの走行距離は異なる場合があります。