HTTP önbelleğe alma davranışını yapılandırma

Jeff Posnick

Bu codelab'i takip etmek için bu Glitch'i ikinci bir sekmede açın.

Not: Bu codelab'de Chrome Geliştirici Araçları kullanılır. Bilgisayarınızda yoksa Chrome'u indirin.

Bu codelab'de, bir Ekspres yayını çalıştıran, Node.js tabanlı web sunucusu bahsedeceğim. Ayrıca, beklediğiniz önbelleğe alma davranışının nasıl onaylanacağını Chrome'un Geliştirici Araçları'ndaki Ağ paneli kullanılarak uygulandığını gösterir.

Not: Belirli talimatlar Express'e yönelik olsa da, doğru önbelleğe alma üst bilgilerini seçmeye ilişkin genel ilkeler tüm web sunucusu ortamları için geçerlidir.

Örnek projeyi tanıyın

Örnek projede üzerinde çalışacağınız anahtar dosyalar şunlardır:

• server.js, web uygulamasının içerik. HTTP isteklerini işlemek için Ekspres'i kullanır ve yanıtlar. Özellikle, express.static() tüm reklam türlerini sunmak için kullanılır. herkese açık dizindeki yerel dosyaları içerebilir; böylece serve-static belgeler işinize yarayacaktır.
• public/index.html, web uygulamasının HTML'si. Çoğu HTML dosyasında olduğu gibi URL’sinin parçası olarak sürüm oluşturma bilgilerini içermelidir.
• public/app.15261a07.js ve public/style.391484cf.css, web uygulamasının JavaScript'idir ve CSS öğeleri. Bu dosyaların her birinin URL'si bir karma içerir ve uygun olması gerekir. index.html, hangi sürümdeki URL'nin yükleneceğini takip edebilirsiniz.

ziyaret edin.

Not: "Gerçek dünyada" karmalar atama ve HTML dosyalarını en son sürüm URL'ye referanslar içerecek şekilde güncelleme işlemi webpack gibi bir derleme aracı tarafından yürütülür. Bu codelab'in amaçları doğrultusunda, karmaların daha önce gerçekleşen bir derleme işleminin parçası olarak oluşturulduğunu varsayın.

HTML'miz için önbelleğe alma üstbilgilerini yapılandırma

Sürüm bilgisi içermeyen URL'ler için isteklere yanıt verirken yanıt mesajlarınıza Cache-Control: no-cache eklediğinizden emin olun. Şununla birlikte: iki ek yanıt başlığından birinin ayarlanması önerilir: Last-Modified veya ETag. İlgili içeriği oluşturmak için kullanılan index.html bu kategoridedir. Bunu iki adıma ayırabilirsiniz.

İlk olarak, Last-Modified ve ETag başlıkları etag ve lastModified yapılandırma seçenekleri. Bu seçeneklerin ikisi de aslında tüm hedefler için true HTTP yanıtları olduğundan bu geçerli kurulumda, bunu almak için etkinleştirmeniz gerekmez gösterir. Ancak yine de yapılandırmanızı açıkça belirtebilirsiniz.

İkinci olarak, Cache-Control: no-cache üstbilgisine ekleme yapabilmeniz gerekir, ancak yalnızca HTML dokümanlarınız için (bu örnekte index.html) kullanılabilir. Bir projeyi yönetmenin en kolay yolu koşullu olarak ayarlamak, bu üstbilgiyi özel bir setHeaders function ve bunun içinde, gelen isteğin bir HTML dokümanı için olup olmadığını kontrol edin.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.

server.js tablosundaki statik sunum yapılandırması şu şekilde başlar:

app.use(express.static('public'));

• Yukarıda açıklanan değişiklikleri yaptığınızda, elde ettiğiniz sonuçlar şöyle görünür:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Sürümlü URL'ler için önbelleğe alma üstbilgilerini yapılandırma

Şu ifadeyi içeren URL'lere ilişkin taleplere yanıt verirken: "parmak izi" veya olan ve içeriğinin hiçbir zaman değişmeyecek nitelikteki sürüm bilgilerini Yanıtlarınıza Cache-Control: max-age=31536000. app.15261a07.js ve style.391484cf.css bu kategoriye girer.

Önceki videoda setHeaders function sağlanmışsa, belirli bir işlemin yapılıp yapılmadığını kontrol etmek için isteği sürümlü bir URL için yapılmışsa Cache-Control: max-age=31536000 üstbilgisini ekleyin.

Bunu yapmanın en sağlam yolu bir normal ifade görmek istediğiniz belirli bir kalıpla eşleşip eşleşmediğini bilmeniz gerekir. Bu örnek projede daima sekiz 0-9 rakam dizisi ve a-f küçük harflerindeki karakterler (ör. onaltılık karakter) içerir. Karma her zaman her iki taraftan bir . karakteriyle ayrılır.

Normal ifade bu genel kurallarla eşleşir new RegExp('\\.[0-9a-f]{8}\\.') olarak ifade edilebilir.

Not: İleride yaşanabilecek sorunlara karşı koruma sağlamak için, bu kuralları belirlerken mümkün olduğunca ayrıntılı bilgi vermeye yardımcı olur. .js veya .css dosya uzantısının kontrol edilmesi gibi daha genel bir eşleşme, projenize sürümü değiştirilmiş başka JavaScript veya CSS öğeleri eklemeniz durumunda ileride soruna neden olabilir.

• setHeaders işlevini şu şekilde görünecek şekilde değiştirin:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Geliştirici Araçları'nı kullanarak yeni davranışı onaylayın

Not: Bu codelab'de çalışarak Chrome'un Geliştirici Araçları'ndaki Network (Ağ) paneli hakkında bilgi edinebilirsiniz.

Statik dosya sunucusunda yapılan değişiklikler yapıldıktan sonra, Geliştirici Araçları Ağ paneli açıkken yayındaki uygulamayı önizleyerek doğru başlıkların ayarlandığından emin olun.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .

• Gösterilen sütunları en alakalı bilgileri eklemek için Ağ panelinde görüntülenir. sütun başlığı:

Burada dikkat edilmesi gereken sütunlar şunlardır: Name, Status, Cache-Control, ETag ve Last-Modified.

• Geliştirici Araçları, Ağ paneli açıkken sayfayı yenileyin.

Sayfa yüklendikten sonra Ağ panelinde örneğin:

İlk satır, gittiğiniz HTML dokümanı içindir. Bu doğru bir şekilde Cache-Control: no-cache ile sunuluyor. Bu isteğin HTTP yanıt durumu bir 304. Bu tarayıcının önbelleğe alınan HTML'yi hemen değil, onun yerine Last-Modified ve ETag kullanarak web sunucusuna bir HTTP isteğinde bulundu olup olmadığını anlamak için HTML'de herhangi bir güncelleme olup olmadığını emin olmanız gerekir. HTTP 304 yanıtı, güncellenmiş HTML olmadığını gösteriyor.

Not: Cache-Control: no-cache, "önbelleğe alınmış kopyayı hiçbir zaman kullanmadı" anlamına gelmez. "Her zaman önce sunucuyla iletişim kurun ve HTTP 304 yanıtı varsa önbelleğe alınmış kopyayı kullanın" anlamına gelir.

Sonraki iki satır, sürümü olan JavaScript ve CSS öğeleri içindir. Şunları yapmalısınız: Cache-Control: max-age=31536000 ile yayınlandığını ve diğer URL'lerin HTTP durumunu her biri 200. Kullanılan yapılandırma nedeniyle girişine tıklarsanız ek ayrıntılar gösterilir, Buna "(disk önbelleğinden)" yanıtı verilebilir.

ETag ve Last-Change sütunlarının gerçek değerleri çok önemli değildir. İlgili içeriği oluşturmak için kullanılan en önemli nokta bunların ayarlandığını doğrulamaktır.

Özet

Bu codelab'deki adımları izleyerek Node.js tabanlı bir web sunucusunda HTTP yanıt başlıklarını Express'i kullanarak yapılandırın. kullanmanızı öneririz. Ayrıca, onaylamanız gereken adımları da ağ paneli aracılığıyla, beklenen önbelleğe alma davranışının kullanılmakta olduğunu Chrome'un Geliştirici Araçları.