Laden von jQuery mit RequireJS - Was ist besser, eine lokale Version oder ein CDN?

Question

EDITED zu klären:

In Bezug auf die Leistung (obwohl das immer noch ein wilder Begriff ist, ich weiß), was besser ist - eine lokale Version oder eine CDN-Version von jQuery, über RequireJS Laden?

Für die Aufzeichnung enthält RequireJS online doc einige Passagen, die CDN abzuschrecken scheint, obwohl ich nicht wirklich sicher, 100% bin, was es bedeutet:

nicht mischte, CDN Laden mit Shim-config in einem Build. Beispielszenario: Sie laden jQuery aus dem CDN, aber verwenden Sie die Shim-Konfiguration, um etwas zu laden wie die Aktienversion von Backbone, die von jQuery abhängt. Wenn Sie den Build tun, achten Sie darauf, jQuery in die erstellte Datei zu integrieren und laden Sie nicht es aus dem CDN. Ansonsten wird Backbone in der eingebauten Datei eingebunden und es wird ausgeführt, bevor der CDN-geladene jQuery geladen wird. Dies ist , da die Shim-Konfiguration nur das Laden der Dateien verzögert, bis Abhängigkeiten geladen sind, aber keine automatische Umbruch von definieren. Nach einem Build sind die Abhängigkeiten bereits inline, die Shim-Konfiguration kann die Ausführung des nicht definierten() 'd-Codes erst später verzögern. define() 'd-Module funktionieren mit CDN-geladenem Code nach einem Build, da sie ihre Quelle in Define-Factory-Funktion korrekt umhüllen, die nicht ausgeführt wird, bis Abhängigkeiten geladen werden. Also die Lektion: shim config ist eine Stop-Gap-Maßnahme für nicht-modularen Code, Legacy-Code. define() 'd Module sind besser.

Theoratically, eine CDN jQuery-Datei in 1 weiteren HTTP-Request führen würde (kann nicht mit anderen JS-Dateien mit r.js zusammengeführt werden), hat aber den möglichen Nutzen, die Ihre Besucher bereits die CDN Cache gespeichert haben Version von anderen Websites, die sie besucht haben.

Allerdings, wenn ich es richtig von den Informationen gegoogelt bekam, Sie noch brauchen eine lokale jQuery r.js kopieren bieten, als die resultierende minimierte JS-Datei benötigen würde immer noch eine Kopie der jQuery enthalten Modul, um die Konsistenz der Abhängigkeit zu gewährleisten. Das würde dazu führen, dass jQuery sowohl über local als auch über CDN geladen wird. (Hoffe ich habe diesen Teil richtig?)

Also, welcher Weg ist besser?

Answer 1

Es ist nicht nur die Tatsache, dass Menschen die Datei zwischengespeichert haben. Benutzeragenten können nur einige Dateien gleichzeitig von derselben Domäne laden. Das Laden der JS-Datei von einem CDN stellt sicher, dass die Datei gleichzeitig geladen wird.

Dies kommt neben er benefit von Benutzern, die bereits eine zwischengespeicherte Version der Datei haben. Also für beliebte Dateien (z. B. das jQuery-Javascript) würde ich es immer von einem CDN laden.

Sie könnten immer eine Fallback zu einer lokalen Version hinzufügen, falls der CDN aus irgendeinem Grund nicht verfügbar ist.

Hinweis

Obwohl die RFC besagt, dass User Agents gleichzeitige meisten User-Agents diese spec heute ignorieren eine maximale Anzahl von 2-Anfragen tun sollten. Siehe auch this old (2009) question auf SO.Beachten Sie, dass es mich nicht überraschen würde, dass Benutzer-Agenten derzeit noch mehr Anfragen machen.

Answer 2

Kurze Antwort: Vermeiden Sie die zusätzlichen HTTP-Anforderung und DNS-Lookup

Sie sind höchstwahrscheinlich besser Ihre eigene Kopie verwenden und lassen RequireJS die Dateien zusammenführen. Mit anderen Worten, ich würde sagen, dass es wertvoller ist, diese zusätzliche HTTP-Anfrage und DNS-Suche zu vermeiden.

Während es wahr ist, dass ein Benutzer kann bereits diese Datei in ihrem Cache von einer anderen Website haben, werden sie höchstwahrscheinlich nicht. Selbst wenn sie kürzlich an einer anderen Site waren, sind die Cache-Größen im Allgemeinen klein genug, dass ein Benutzer während einer normalen Browsing-Sitzung oder zweien einfach seinen Cache füllen kann, in welchem ​​Fall ältere Dateien verworfen werden.

Ich denke, dass Sie wirklich nur über 1% Ihrer Zugriffe sprechen, die CDN-Datei im Cache haben, so dass nur 1% Ihrer Benutzer davon profitieren. Durch die Kombination dieser Ressourcen und die Vermeidung der zusätzlichen http-Anfrage profitieren Sie jedoch von 99% Ihrer Benutzer. Im umgekehrten Fall würden Sie 99% Ihrer Nutzer verletzen, wenn Sie nicht kombinieren. Nur eine andere Sichtweise.

Eine weitere Überlegung ist mobile Benutzer ... mobile Benutzer haben schreckliche Latenz, so dass die RTT für die zusätzliche HTTP-Anfrage und DNS-Lookup eine größere Kosten haben.

Answer 3

Ihr requirejs doc-Anführungszeichen bezieht sich speziell auf die Verwendung von Skripten mit einer Shim-Konfiguration für jQuery. Das dynamische Laden einer Basisabhängigkeit von einem CDN eines Drittanbieters ist in Ordnung, wenn alle Skripte AMD-Module sind.

Cache-Hits sind nicht so hoch, wie Sie vielleicht denken (Yahoo Ich glaube, eine Studie über Cache vs non-cached Zustand), und es bedeutet, jetzt müssen Sie sich auf eine andere Domäne zum Laden verlassen.

Die Vorteile hängen wahrscheinlich von der App ab, Profilerstellung führt zu der besten Antwort. Zum Beispiel, wenn es eine Website mit vielen Bildern ist, dann spielt die Strategie für jQuery eine geringere Rolle, da das Laden des Bildes wahrscheinlich das auffälligere Perf-Problem sein wird.

Ich würde mit der Optimierung von jQuery in die gebaute Datei beginnen und AMD-Module für alles verwenden, also wenn ich an das CDN delegieren möchte, kann ich. Wenn jedoch requirejs und die Shim-Konfiguration verwendet werden, müssen die Basisabhängigkeiten in die erstellte Datei eingebunden werden, da die Shimmed-Bibliotheken define() nicht aufrufen - sie warten nicht auf das Laden von Abhängigkeiten, sie wollen sie sofort verfügbar haben.