Meine Website verwendet ungefähr 10 JavaScript-Bibliotheken von Drittanbietern wie jQuery, jQuery UI, prefixfree, einige jQuery-Plugins und auch meinen eigenen Javascript-Code. Derzeit ziehe ich die externen Bibliotheken von CDNs wie Google CDN und Cloudflare. Ich habe mich gefragt, was ein besserer Ansatz ist:
- Ziehen der externen Bibliotheken aus CDNs (wie ich es heute tue).
- Alle Dateien zu einer einzigen JS- und einer einzigen CSS-Datei zusammenfassen und lokal speichern.
Alle Meinungen sind willkommen, solange sie erklärt werden. Vielen Dank 🙂
Der Wert eines CDN liegt in der Wahrscheinlichkeit, dass der Benutzer bereits eine andere Website besucht hat, die dieselbe Datei von diesem CDN aufruft, und wird je nach 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.
Vor diesem Hintergrund ist es absolut sinnvoll, eine relativ große und beliebte Datei von einem beliebten CDN abzurufen. jQuery und in geringerem Maße jQuery UI passen in diese Rechnung.
In der Zwischenzeit ist das Verketten von Dateien für kleinere Dateien sinnvoll, die sich wahrscheinlich nicht viel ändern – Ihre häufig verwendeten Plugins werden dieser Rechnung entsprechen, aber Ihr anwendungsspezifischer Kerncode wahrscheinlich nicht: Er kann sich von Woche zu Woche ändern, und wenn Sie Wenn Sie es mit all Ihren anderen Dateien verketten, müssten Sie den Benutzer zwingen, alles noch einmal herunterzuladen.
Die HTML5-Boilerplate macht einen ziemlich guten Job, eine generische Lösung dafür bereitzustellen:
- Modernizr wird von lokal im Kopf geladen: Es ist sehr klein und unterscheidet sich von Instanz zu Instanz ziemlich stark, daher macht es keinen Sinn, es von einem CDN zu beziehen, und es wird dem Benutzer nicht zu sehr schaden, es von Ihrem zu laden Server. Es wird in den Kopf gesetzt, weil CSS es möglicherweise verwendet, also möchten Sie, dass seine Effekte bekannt sind, bevor der Körper gerendert wird. Alles andere kommt ganz nach unten, um zu verhindern, dass Ihre schwereren Skripts das Rendern blockieren, während sie geladen und ausgeführt werden.
- jQuery aus dem CDN, da es fast jeder verwendet und es ziemlich schwer ist. Der Benutzer hat dies wahrscheinlich bereits zwischengespeichert, bevor er Ihre Website besucht, und lädt es in diesem Fall sofort aus dem Cache.
- Alle Ihre kleineren Abhängigkeiten von Drittanbietern und Codeausschnitte, die wahrscheinlich nicht viel ändern, werden zu einer verkettet
plugins.js
Datei von Ihrem eigenen Server geladen. Dies wird beim ersten Besuch des Benutzers mit einem entfernten Ablauf-Header zwischengespeichert und bei späteren Besuchen aus dem Cache geladen.
- Ihr Kerncode geht hinein
main.js, mit einem engeren Ablauf-Header, um der Tatsache Rechnung zu tragen, dass sich Ihre Anwendungslogik von Woche zu Woche oder Monat zu Monat ändern kann. Auf diese Weise kann, wenn Sie einen Fehler behoben oder neue Funktionen eingeführt haben, wenn der Benutzer ihn in zwei Wochen besucht, dies frisch geladen werden, während der gesamte oben genannte Inhalt aus dem Cache geladen werden kann.
Ihre anderen großen Bibliotheken sollten Sie sich einzeln ansehen und sich fragen, ob sie dem Beispiel von jQuery folgen, einzeln von Ihrem eigenen Server geladen oder verkettet werden sollen. Ein Beispiel dafür, wie Sie zu diesen Entscheidungen kommen könnten:
- Angular ist unglaublich beliebt und sehr groß. Holen Sie es vom CDN.
- Twitter Bootstrap ist ähnlich beliebt, aber Sie haben eine relativ kleine Auswahl an Komponenten, und wenn der Benutzer es nicht bereits hat, lohnt es sich möglicherweise nicht, ihn dazu zu bringen, das vollständige Ding herunterzuladen. Allerdings 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 – also möchten Sie es vielleicht lokal gehostet lassen, aber seine Dateien von Ihren getrennt halten hauptsächlich
plugins.js. Auf diese Weise können Sie Ihre immer aktualisieren plugins.js mit Bootstrap-Erweiterungen, ohne den Benutzer zu zwingen, den gesamten Bootstrap-Kern herunterzuladen.
Aber es gibt keinen Imperativ – Ihr Kilometerstand kann variieren.
