JavaScript ve CSS önbellek yenileme: sürümlü adreslerle güvenli yayın

HTML belgesini sürümlü kaynaklardan ayırın

HTML'i küçük bir bildirim dosyası gibi düşünün. A sürümü app.4c21.js ve site.19ab.css kullanır. B, app.9d80.js kullanırken CSS baytları değişmediyse aynı CSS'i korur. Buradaki özetler örnektir, gerçek dosyalardan hesaplanmamıştır.

Böylece değişmeyen dosyalar yeniden kullanılır, değişenler yeni önbellek kimliği kazanır. HTML'i bir yıl saklamak yeni yayının bulunmasını geciktirebilir: eski belge eski adresleri istemeyi sürdürür.

Başlıkları kaynak sözleşmesine göre seçin

Bu URL'de asla değişmeyecek herkese açık dosyada uzun max-age ve immutable uygun olabilir. HTML için no-cache saklamaya izin verir ama yeniden kullanmadan önce doğrulama ister. no-store ise saklanmamasını ister. Bütün siteye tek başlık kopyalamayın.

Örnek başlıklar evrensel ayar değildir. Barındırmanın gerçekte ne gönderdiğini ve CDN önbelleğini kontrol edin. Yerel yapılandırma, genel tarayıcı yanıtının aynı olduğunu kanıtlamaz.

Versioned public asset: /assets/app.9d80.js
Cache-Control: public, max-age=31536000, immutable

HTML document: /index.html
Cache-Control: no-cache

The URL /assets/app.9d80.js must continue to serve the same bytes.

Sorgu sürümünün önbellek anahtarına girdiğini doğrulayın

/app.js?v=release-b, ilgili bütün önbellekler sorguyu anahtara katıyorsa /app.js?v=release-a adresinden farklı kimlik sağlar. Sorguları yok sayan CDN kuralı her ikisini aynı nesneye dönüştürebilir.

Her yüklemede rastgele değer üretmeyin; yararlı yeniden kullanımı yok eder. İçerik özeti veya sürüm yalnızca kaynak değişince değişsin. /app.js#release-b gibi parçalar HTTP isteğinde gönderilmez ve bu iş için uygun değildir.

Eski baytları sunan katmanı bulun

HTML yanıtını, başvurulan adresi ve dosya baytlarını karşılaştırın. Belge eski özeti kullanıyorsa HTML tazeliğine bakın. Yeni adreste eski bayt varsa yayın, anahtarlar ve kaynağı inceleyin. Ağ doğru ama davranış eskiyse çalışan sayfayı veya service worker etkisini kontrol edin.

CDN temizliği ziyaretçilerin tarayıcısındaki taze yanıtı silmez. Zorla yenileme de yalnızca yerel teşhistir. Başarılı denemenin tekrarlanabilmesi için hangi katmanı atladığınızı kaydedin.

• Son HTML ve başvurduğu betik ya da stil adresini kaydedin.
• Durum, Content-Type, Cache-Control, ETag ve önbellek başlıklarını inceleyin.
• Beklenen sürümün HTML yedek sayfası değil doğru baytları döndürdüğünü doğrulayın.
• Varsa service worker kurallarını ayrı inceleyin.
• Temiz ziyaret ve yayın boyunca açık kalan sayfayı sınayın.

Eski sayfaları ve geri alma yolunu koruyun

Yeni kaynakları onlara başvuran HTML'den önce yükleyin veya tüm yayını birlikte değiştiren platform kullanın. Eski HTML ve sekmeler için önceki dosyaları yeterince tutun; bir modül saatler sonra istenebilir.

B'yi A ve B kaynakları birlikteyken yayımlayıp doğrulayın; HTML'i A'ya geri döndürme olanağını koruyun. app.4c21.js dosyasını hemen silmek eski belgeyi bozar. Aynı adla yeni bayt sunmak da içerik sözleşmesini ve güvenilir geri almayı bozar.

Doğruluktan sonra yeniden kullanımı ölçün

İlk ziyaret, tekrar ziyaret ve yeni yayın denemesi yapın: ilk indirme, uygun kaynakların kullanılması ve sadece değişen sürümlerin indirilmesi. Yeniden doğrulama istekleri dahil gerçek aktarımı inceleyin.

Önbellek tasarrufu ve aktarım hesapları, belirttiğiniz isabet oranı, istek sayısı ve boyut varsayımlarını karşılaştırır. Genel yanıt başlıklarının ve gerçek isabet oranının ölçümünün yerini tutmaz.