Was ist der beste Weg, um CSS- und JS-URLs zu versionieren?

26

Gemäß den vielbeachteten Best Practices von Yahoo zur Beschleunigung Ihrer Website stellen wir statischen Inhalt von einem CDN mithilfe von Cache-Ablauf-Headern für die Zukunft bereit. Natürlich müssen wir diese "statischen" Dateien gelegentlich aktualisieren, daher fügen wir derzeit eine Infix-Version als Teil des Dateinamens hinzu (basierend auf der SHA1-Summe des Dateiinhalts). Somit:

styles.min.css

Wird:

styles.min.abcd1234.css

Das Verwalten der versionierten Dateien kann jedoch mühsam werden, und ich habe mich gefragt, ob eine GET-Argumentnotation sauberer und besser sein könnte:

styles.min.css?v=abcd1234

Welches verwenden Sie und warum? Gibt es Überlegungen zu Browsern oder Proxys / Caches, die ich berücksichtigen sollte?

static-content cache-control David Eyk
quelle
Der Grund, den ich frage, ist, dass ich mich an einen Grund zu erinnern scheine, den GET-Argument-Stil NICHT zu verwenden, aber ich kann mich nicht erinnern, warum.
David Eyk
Erfordert die Verwendung des GET-Arguments nicht, dass das Stylesheet mit einer Art serverseitigem Skript bereitgestellt wird (und es würde nicht mehr statisch sein)?
Lotus Notes
@Lotus: Sie können die GET-Argumente senden und sie werden unbemerkt ignoriert, wenn nichts danach sucht.
David Eyk

Antworten:

10

Laut Google Make the Web Faster werden Seiten mit Abfrageparametern nicht von vielen HTTP-Proxys zwischengespeichert.

Die meisten Proxys, insbesondere Squid-Ups bis Version 3.0, zwischenspeichern Ressourcen nicht mit einem "?" in ihrer URL, auch wenn ein Cache-control: publicHeader in der Antwort vorhanden ist. Um das Proxy-Caching für diese Ressourcen zu aktivieren, entfernen Sie Abfragezeichenfolgen aus Verweisen auf statische Ressourcen und codieren Sie die Parameter stattdessen in die Dateinamen.

So styles.min.abcd1234.cssist die bevorzugte Lösung. Sie können einen geeigneten Mechanismus zum Umschreiben von URLs verwenden, um styles.min.abcd1234.cssdie Implementierung styles.min.css?v=abcd1234transparenter zu gestalten.

Wenn Sie nur HTTPS unterstützen, gilt dieser Hinweis nicht, da Proxys normalerweise keine Seiten zwischenspeichern können, die über SSL bereitgestellt werden.

Bis Ulen
quelle
2
Ich frage mich, ob die Informationen zu Query-String-Caching und Proxy-Servern etwas veraltet sind. Die Dokumente von Google verweisen in diesem Kontext nicht mehr auf Abfragezeichenfolgen und Proxyserver. Obwohl die Beispiele immer noch das Ändern des Dateinamens selbst beinhalten. Berichten zufolge unterstützen Squid 2.7 (2008) und 3.1 (2010) standardmäßig das Zwischenspeichern von Abfragezeichenfolgen, und frühere Versionen könnten so konfiguriert werden, dass sie dies unterstützen.
MrWhite
15

Bei Verwendung der Versionierung im GET-Stil würden aus einem leeren Cache mehrere URLs - z. B. style.css?v=123und style.css?v=456- denselben Inhalt zurückgeben. Ich kann jedoch nicht sehen, dass dies problematisch wäre, zumal Sie immer nur einen Link auf einmal erstellen würden.

Ich denke, Sie werden feststellen, dass der GET-Stil viel einfacher zu pflegen ist. Sie benötigen keine separaten Dateien: Ändern Sie einfach die URL, und der Browser ruft das CSS erneut ab.

UPDATE: Nach weiteren Recherchen scheint es, dass die Verwendung einer Abfragezeichenfolge dazu führen kann, dass Browser die Dateien nicht mehr zwischenspeichern. Wenn Sie jedoch korrekte Header zurückgeben, Expiresist dies kein Problem.

UPDATE 2: In der akzeptierten Antwort wird darauf hingewiesen, dass einige Proxys keine Dateien mit einer Abfragezeichenfolge zwischenspeichern. Dies basiert jedoch auf alten Informationen; Das in Squid erwähnte Problem wurde vor 7 Jahren behoben. Impressive Webs hat diesbezüglich eine gute Stellungnahme abgegeben .

Verärgerte Ziege
quelle
Das ist der Vorbehalt, an den ich mich erinnern wollte. Danke für den Link.
David Eyk
1

Beides funktioniert gleichermaßen, da eine Abfragezeichenfolge als Teil der URL betrachtet wird. Wenn Sie sie ändern, wird der Name der Ressource geändert, sodass der Browser eine neue Kopie der Datei abruft.

Ich sage, wende die Methode an, die für dich einfacher zu pflegen ist.

John Conde
quelle
0

dies ist keine antwort auf die obige frage , ich möchte eine bessere lösung, also frage ich hier selbst

Beide Methoden erfordern Änderungen an den Dateien, auf die sich die CSS- und JS-Dateien beziehen. In der Tat würde es einen Neustart des Anwendungsservers erfordern, nachdem die Änderungen vorgenommen wurden.

Gibt es eine bessere Möglichkeit, die Versionsverwaltung für statische Dateien durchzuführen, ohne den Anwendungsserver neu starten zu müssen?

Folgendes ist in der Lösung ausgeschlossen

  • Ändern der CSS- und JS-Dateinamen
  • Übergeben eines Abfrageparameters in der URL

Die Lösung sollte sich auch nicht auf die Einstellung der Cachesteuerung auswirken oder verfallen.

Vielen Dank

Santhosh S
quelle
1
Sieht aus, als wärst du neu hier. Das ist eine gute Frage. Sie sollten es als solches veröffentlichen und möglicherweise zu Referenzzwecken auf diese Frage verweisen. Ich habe dies als Moderator markiert, damit sie Ihnen helfen können.
David Eyk
Wie David betonte, ist diese Seite nicht wie andere Forumsseiten. Wenn Sie eine neue Frage haben, klicken Sie einfach auf "Frage stellen"
Mark Henderson
Dies ist eine nützliche Klarstellung. Wenn Sie Ihr Stylesheet ändern, sollten Sie den Namen und den Verweis lieber beibehalten, als Hunderte von Verweisen auf das Stylesheet auf der Website zu aktualisieren.
Mark Stosberg