1. ホーム
  2. javascript

[解決済み] CDN上の複数ファイルとローカルにある1ファイルの比較

2023-02-21 12:40:15

質問

私のウェブサイトでは、jQuery、jQuery UI、prefixfree、いくつかの jQuery プラグイン、および私自身の javascript コードなど、約10 のサードパーティの javascript ライブラリを使用しています。現在、私はGoogle CDNやcloudflareのようなCDNから外部ライブラリを取得しています。より良い方法は何なのかと思っていました。

  1. CDN から外部ライブラリを取得する (現在私が行っているように)。
  2. すべてのファイルを1つのjsファイルと1つのcssファイルに結合して、ローカルに保存する。

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

どのように解決するのですか?

CDN の価値は、ユーザーがその CDN から同じファイルを呼び出している別のサイトをすでに訪問している可能性にあり、ファイルのサイズに応じてますます価値が高くなります。この可能性は、要求されたファイルのユビキタス性と CDN の人気によって高まります。

このことを念頭に置いて、人気のある CDN から比較的大きく、人気のあるファイルを取得することは、絶対的な意味を持ちます。

一方、ファイルを連結することは、あまり変更されない小さいファイルのために意味があります。よく使われるプラグインはこの法案に当てはまりますが、コア アプリケーション固有のコードはおそらくそうではありません:週ごとに変わるかもしれないし、他のすべてのファイルと連結する場合、ユーザーはすべてをもう一度ダウンロードすることを余儀なくされます。

HTML5 ボイラープレートは は、このための一般的な解決策を提供するのに非常に良い仕事をしています。

  1. Modernizr は頭の中でローカルから読み込まれます。 インスタンスによってかなり異なるので、CDN からソースするのは意味がありません。 CDN から提供する意味はありませんし、あなたのサーバーからロードしてもユーザーにはあまり害はありません。 サーバーから読み込んでも、ユーザーにはあまり迷惑がかかりません。CSSが利用する可能性があるため、headに記述しています。 がそれを利用する可能性があるため、ボディがレンダリングされる前にその効果を知っておきたいからです。 がレンダリングされる前に、その効果を知っておきたいからです。それ以外のものはすべて下側に配置します。 重いスクリプトがロードして実行される間にレンダリングがブロックされるのを防ぐためです。
  2. jQuery はほとんどすべての人が使用しており、かなり重いので、CDN から取得します。ユーザーはおそらく、あなたのサイトにアクセスする前に、すでにこれをキャッシュしていることでしょう。 その場合、ユーザーは即座にキャッシュからそれをロードします。
  3. サードパーティの小さな依存関係や、あまり変更されないであろうコードスニペットは、すべて plugins.js ファイルに連結されます。これは これは、ユーザーが初めてアクセスしたときに、遠い有効期限ヘッダとともにキャッシュされ、次回アクセス時に キャッシュから読み込まれます。
  4. あなたのコアコードは main.js で、アプリケーションのロジックが週単位、月単位で変化することを考慮して、 expiry ヘッダを近づけます。 週ごと、月ごとにアプリケーションのロジックが変わることを考慮して、有効期限の近いヘッダーを付けます。こうすることで、バグを修正したり 2週間後にユーザーが訪問したときに、新しい機能を導入することができます。 このようにすれば、2週間後にバグを修正したり、新しい機能を導入したりしたときに、上記のすべてのコンテンツをキャッシュから読み込みながら、新しいコンテンツを読み込むことができます。 キャッシュから持ってくることができます。

他の主要なライブラリについては、それらを個々に見て、jQueryのリードに従うべきか、独自のサーバーから個別に読み込むべきか、あるいは結合されるべきかを自問自答する必要があります。このような決定を下す方法の一例です。

  • Angularは非常に人気があり、非常に大規模です。CDNから取得する。
  • Twitter Bootstrapは同じようなレベルの人気ですが、そのコンポーネントの選択は比較的限られており、ユーザーがまだ持っていない場合は、完全なものをダウンロードさせる価値がないかもしれません。とはいえ、残りのコードに組み込む方法はかなり本質的であり、サイト全体を再構築しない限り変更することはないでしょう。 plugins.js . この方法では、常に plugins.js を常に更新することができます。

しかし、必須というわけではありません - あなたのマイレージは変わるかもしれません。