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.
Ö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öyleceserve-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
vepublic/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.
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.
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
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.
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ı.