Sollte ich Drittanbieter-Bibliotheken von Vendor oder CDN laden?

Ich habe Plugins gesehen, die Drittanbieter-Bibliotheken herunterladen und als lokale Dateien aus /vendor laden, und andere, die die Bibliothek über ein CDN einbinden.

Ist ein Ansatz in Bezug auf Bandbreite und Geschwindigkeit besser als der andere?

Es gibt eine kleine Grauzone dazwischen. Du kannst Discourse so einrichten, dass es Assets bereitstellt, einschließlich JS von Themes oder Plugins, über ein CDN. Das bedeutet, dass selbst wenn dein Plugin die externe Bibliothek in /vendor lädt, sie von dem CDN geladen wird, das du für Discourse konfiguriert hast. Dies ist jedoch ein privates CDN.

Das gesagt, ich glaube nicht, dass du darauf anspielst. Du beziehst dich auf Dienste wie https://cdnjs.com und https://www.jsdelivr.com, was ein etwas anderes Thema ist – ein öffentliches CDN.

Dienste wie cdnjs verfügen über ein weit verzweigtes Netzwerk von Servern, die genau für solche Zwecke ausgelegt sind.

Also:

Sie können schneller sein und helfen tatsächlich, die Last auf deinem Server zu reduzieren.

Aber… dieser Geschwindigkeitsvorteil ist auch verfügbar, wenn du /vendor auf einer Seite verwendest, die Discourse so konfiguriert hat, dass es ein privates CDN nutzt.

Außerdem, was die Bandbreite angeht: Die meisten externen JS-Bibliotheken sind kleiner als 20 KB. Du gewinnst zwar etwas, aber es ist kein wirklich großer Punkt, es sei denn, deine Seite wird täglich hunderttausende Male aufgerufen.

Ein Vorteil bei der Nutzung von Diensten wie cdnjs ist, dass sie dieselbe Datei ausliefern und Caching-Header setzen.

Was bedeutet das? Nehmen wir zum Beispiel jQuery.

Viele Seiten nutzen jQuery, und viele davon verwenden cdnjs, um jQuery auszuliefern. Wenn cdnjs die jQuery-Datei an den Benutzer ausliefert, sind Caching-Header enthalten – standardmäßig für ein Jahr.

Das bedeutet, dass, wenn ein Benutzer Seite A besucht – die cdnjs für jQuery nutzt – und dann Seite B, die ebenfalls dieselbe Datei mit derselben Version nutzt, der Browser jQuery nicht erneut herunterladen muss, da es zwischengespeichert ist. Das führt zu schnellerem Laden der Seiten.

Der oben genannte Punkt ist der größte Vorteil bei der Nutzung von Diensten wie cdnjs für deine externen Bibliotheken. Allerdings sind sehr wenige Bibliotheken so verbreitet wie jQuery, daher hängt es wirklich davon ab, wie verbreitet die Bibliothek ist.

Wenn du Dateien von cdnjs lädst, musst du außerdem sicherstellen, dass du sie in den CSP-Einstellungen hinzufügst.

Also, ich denke, die Antwort hier ist … es kommt darauf an.

Lädst du die Bibliothek so, wie sie ist?
Ist sie weit verbreitet?
Ist sie eher groß?

Wenn ja, vielleicht ein CDN nutzen. Wenn nicht, halte es einfach und füge sie einfach in /vendor hinzu.

Kleines Update: Chrome, Safari und Firefox funktionieren nicht mehr so. Es gibt keinen geteilten Cache mehr zwischen den Seiten:

Kann jemand bitte einen Link zu einem Plugin teilen, das die Methode zum Hinzufügen von Drittanbieterbibliotheken entweder über den /vendor-Ordner oder ein CDN verwendet?

Ich konnte keine Dokumentation dazu finden und habe Schwierigkeiten, eine Drittanbieterbibliothek korrekt in mein Plugin einzubinden, sie korrekt zu registrieren, die genaue Ordnerstruktur einzuhalten und die Importanweisung in den Controller-Dateien korrekt zu schreiben.

Vielen Dank im Voraus für die Hilfe!

discourse-math könnte eine gute Referenz sein – es hat eine Reihe von „vendored“ Skripten im Verzeichnis /public. Oder ein einfacheres Beispiel wäre discourse-client-performance.