Der Wert eines CDN liegt in der Wahrscheinlichkeit, dass der Benutzer bereits eine andere Site besucht hat, die dieselbe Datei von diesem CDN aus aufruft, und wird abhängig von der Größe der Datei immer wertvoller. Die Wahrscheinlichkeit, dass dies der Fall ist, steigt mit der Allgegenwart der angeforderten Datei und der Popularität des CDN.
In diesem Sinne ist es absolut sinnvoll, eine relativ große und beliebte Datei aus einem beliebten CDN zu ziehen. jQuery und in geringerem Maße jQuery UI passen zu dieser Rechnung.
In der Zwischenzeit ist das Verketten von Dateien für kleinere Dateien sinnvoll, die sich wahrscheinlich nicht wesentlich ändern. Ihre häufig verwendeten Plugins passen zu dieser Rechnung, Ihr anwendungsspezifischer Kerncode jedoch wahrscheinlich nicht: Sie können sich von Woche zu Woche ändern, und wenn Sie Wenn Sie es mit all Ihren anderen Dateien verketten, müssen Sie den Benutzer zwingen, alles erneut herunterzuladen.
Das HTML5-Boilerplate bietet eine ziemlich gute Lösung für dieses Problem :
- Modernizr wird von local in the head geladen: Es ist sehr klein und von Instanz zu Instanz sehr unterschiedlich. Daher ist es nicht sinnvoll, es von einem CDN zu beziehen, und es schadet dem Benutzer nicht zu sehr, es von Ihrem CDN zu laden Server. Es wird in den Kopf gesetzt, weil CSS es möglicherweise nutzt. Sie möchten also, dass die Auswirkungen bekannt sind, bevor der Körper rendert. Alles andere steht ganz unten, um zu verhindern, dass Ihre schwereren Skripte das Rendern blockieren, während sie geladen und ausgeführt werden.
- jQuery vom CDN, da fast jeder es benutzt und es ziemlich schwer ist. Der Benutzer wird dies wahrscheinlich bereits zwischengespeichert haben, bevor er Ihre Site besucht. In diesem Fall wird er es sofort aus dem Cache laden.
- Alle Ihre kleineren Abhängigkeiten von Drittanbietern und Codefragmente, die sich wahrscheinlich nicht wesentlich ändern, werden zu einer
plugins.js
Datei verkettet, die von Ihrem eigenen Server geladen wird. Dies wird beim ersten Besuch des Benutzers mit einem entfernten Ablaufheader zwischengespeichert und bei nachfolgenden Besuchen aus dem Cache geladen.
- Ihr Kerncode
main.jswird mit einem näheren Ablaufheader eingegeben, um der Tatsache Rechnung zu tragen, dass sich Ihre Anwendungslogik von Woche zu Woche oder von Monat zu Monat ändern kann. Auf diese Weise kann, wenn Sie einen Fehler behoben oder neue Funktionen eingeführt haben, wenn der Benutzer in zwei Wochen einen Besuch abstattet, dieser neu geladen werden, während der gesamte oben genannte Inhalt aus dem Cache übernommen werden kann.
Für Ihre anderen Hauptbibliotheken sollten Sie sie einzeln betrachten und sich fragen, ob sie dem Beispiel von jQuery folgen, einzeln von Ihrem eigenen Server geladen oder verkettet werden sollen. Ein Beispiel, wie Sie zu diesen Entscheidungen kommen könnten:
- Angular ist unglaublich beliebt und sehr groß. Holen Sie es sich vom CDN.
- Twitter Bootstrap erfreut sich einer ähnlichen Beliebtheit, aber Sie haben eine relativ geringe Auswahl seiner Komponenten, und wenn der Benutzer es noch nicht hat, lohnt es sich möglicherweise nicht, sie zum vollständigen Herunterladen zu bewegen. Trotzdem ist die Art und Weise, wie es in den Rest Ihres Codes passt, ziemlich intrinsisch, und Sie werden es wahrscheinlich nicht ändern, ohne die gesamte Site neu zu erstellen. Daher möchten Sie es möglicherweise lokal gehostet lassen, aber die Dateien von Ihren getrennt halten Haupt
plugins.js. Auf diese Weise können Sie Ihre plugins.jsmit Bootstrap-Erweiterungen jederzeit aktualisieren, ohne den Benutzer zu zwingen, den gesamten Bootstrap-Kern herunterzuladen.
Es gibt jedoch keine Notwendigkeit - Ihr Kilometerstand kann variieren.