Netlify Önbellek Eklentisini Eleventy ile Test Etme

Raymond Camden

Aylardır kontrol etmek ve denemek istiyordum, Netlify Önbelleğe Alma eklentisi. Bu eklenti, derlemeler arasında kaynakları önbelleğe almanıza olanak tanır ve derlemeler yaparken size zaman kazandırır. İşe yaradığından şüphem yoktu, ama onu çalışırken görmek için kendim denemem gerekiyordu. Test etmek için kullandım onbir, ancak eklentiyle herhangi bir statik site oluşturucuyu kullanabileceğinizi unutmayın. (Sadece o kadar havalı olmayacak.)

Demo Sitesi

Demom için, bir tür yavaş süreci olan bir şeyi taklit etmek istedim. Yine de basit tutmak istedim, bu yüzden yavaşlığı “sahte” etmeye karar verdim. Oluşturduğum süreç için, Eleventy’ye bir PDF dizinini taramasını söyleyeceğim ve her PDF için onları “işleyecek”. Bu süreç çalışıyor olabilir Ayıkla PDF’nin içeriğini almak için API. Sahte olacağı için gerçekten önemli değil.

Bunu oluşturmak için yeni bir Eleventy sitesi kurdum (repoyu sonunda paylaşacağım) ve ekledim _data/pdfs.js:

const fs = require('fs');

const sourceDir="./pdfs";
const cacheDir="./scanned_pdfs";

/*
Fake logic!
*/
async function parsePDF(f) {
	return new Promise((resolve, reject) => {

		setTimeout(() => {
			resolve({
				input:f,
				made:new Date()
			});
		}, 5000);

	});
}

module.exports = async () => {

	console.log('running pdfs data file');
	let files = fs.readdirSync(sourceDir);
	let pdfs = [];

	for(let i=0; i<files.length; i++) {
		let f = files[i];
		console.log('pdf source input', f);
		let filenoext = f.replace(/.pdf$/,'');
		// do we have a cache for f?
		let cached_file = cacheDir + `/${filenoext}.json`;
		console.log('cached_file location', cached_file);
		if(!fs.existsSync(cached_file)) {
			console.log('The cached file does NOT exist. Getting my data.');
			let parse = await parsePDF(f);
			console.log('got my parsed pdf info ', parse);
			fs.writeFileSync(cached_file, JSON.stringify(parse));
			pdfs.push({
				name:f,
				data:parse
			});
		} else {
			console.log('The cached file DOES exist.');
			let data = JSON.parse(fs.readFileSync(cached_file, 'utf8'));
			pdfs.push({
				name:f,
				data
			});
		}
	};

	return pdfs;

};

Veri dosyası bir dizini tarayarak başlar (sourceDir) PDF’lerin bir listesi için. Her PDF için bunları işlemesi gerekir. Önce işlem için önbelleğe alınmış bir dosyanın olup olmadığını kontrol eder (cached_file) ve değilse, sahte işlemimi yürütür. Not kullanıyorum setTimeout işlemi beş saniye beklemeye zorlamak için burada. Bittiğinde, sonucu saklar.

Sonuç, PDF’lerimin her biri için aynı ada (uzantı hariç) sahip bir dizi veri dosyasıdır. Veriler yalnızca dosya adı ve oluşturuldukları zamanı gösteren bir tarih damgasıdır.

GitHub depom için olumsuzluk üretimde olması gereken taranan sonuçları taahhüt ediyorum, ancak bir .gitkeep dizinin depoda olduğundan emin olmak için dosya.

Sonunda basit bir yapı kurdum. index.liquid sonuçları işlemek için dosya:

---
layout: main
---

<h1>Hello World</h1>

<p>
I was made {{ "now" | date: "%Y-%m-%d %H:%M" }}.
</p>

<h2>PDFs</h2>
<ul>
{% for pdf in pdfs %}
	<li>filename, {{ pdf.name }}, parsed {{ pdf.data.made  | date: "%Y-%m-%d %H:%M:%S" }}</li>
{% endfor %}
</ul>

Dosyanın en üstte oluşturulduğu zaman çıktısını aldığımı fark edeceksiniz, bu önbellek çalıştığında karşılaştırma için faydalı olacaktır. Her PDF için adını ve verilerinin yapıldığı zamanı oluşturuyorum.

Bunun yerel olarak çalıştığını onayladıktan sonra Netlify’a konuşlandırdım. Birkaç konuşlandırma yaptım ve genel olarak ortalama bir dakika on beş saniye civarındaydı:

Derlemeleri tekrarlamaya devam edersem, zaman değişmez ve günlüklere bakarsam, sahte süreçten önbelleğe alınan sonuçların hiçbir zaman var olmadığını görebilirsiniz:

4:45:28 PM: The cached file does NOT exist. Getting my data.
4:45:33 PM: got my parsed pdf info  {
4:45:33 PM:   input: 'a-midsummer-nights-dream_PDF_FolgerShakespeare.pdf',
4:45:33 PM:   made: 2022-06-26T21:45:33.617Z
4:45:33 PM: }
4:45:33 PM: pdf source input alls-well-that-ends-well_PDF_FolgerShakespeare.pdf
4:45:33 PM: cached_file location ./scanned_pdfs/alls-well-that-ends-well_PDF_FolgerShakespeare.json
4:45:33 PM: The cached file does NOT exist. Getting my data.
4:45:38 PM: got my parsed pdf info  {
4:45:38 PM:   input: 'alls-well-that-ends-well_PDF_FolgerShakespeare.pdf',
4:45:38 PM:   made: 2022-06-26T21:45:38.621Z
4:45:38 PM: }

Şeyleri Önbelleğe Alın!

Pekala, şimdi havalı kısım için. Önbelleğe almayı etkinleştirmek için toplam iki şey yapmanız gerekir. İlk önce, eklentiyi aracılığıyla “yükledim” netlify.toml:

[[plugins]]
package = "netlify-plugin-cache"
  [plugins.inputs]
  # Optional (but highly recommended). Defaults to [".cache"].
  paths = ["scanned_pdfs"]

Eklenti varsayılan olarak belirli bir klasöre (.cache) ancak gördüğünüz gibi, kodumun aradığı önbellek dizini ile eşleşecek şekilde değiştim.

İkinci ve çok önemli olan adım, eklentiyi package.json’ınızda görünecek şekilde yerel olarak kurmaktır:

npm i -D netlify-plugin-cache 

Şimdi – ilk kez konuşlandırdığımda, kurulması gerektiğinden önbelleğe almada herhangi bir gelişme göstermedi, ancak ikinci ve sonraki yapılar çarpıcı bir gelişme gösterdi (göreceli olarak):

Daha hızlı derlemeler

Şimdi otuz beş ila kırk saniye civarında yapılar görüyorum. Ve günlükler önbelleğin çalıştığını doğrular:

4:54:07 PM: running pdfs data file
4:54:07 PM: pdf source input a-midsummer-nights-dream_PDF_FolgerShakespeare.pdf
4:54:07 PM: cached_file location ./scanned_pdfs/a-midsummer-nights-dream_PDF_FolgerShakespeare.json
4:54:07 PM: The cached file DOES exist.
4:54:07 PM: pdf source input alls-well-that-ends-well_PDF_FolgerShakespeare.pdf
4:54:07 PM: cached_file location ./scanned_pdfs/alls-well-that-ends-well_PDF_FolgerShakespeare.json
4:54:07 PM: The cached file DOES exist.
4:54:07 PM: Creating deploy upload records
4:54:07 PM: pdf source input antony-and-cleopatra_PDF_FolgerShakespeare.pdf
4:54:07 PM: cached_file location ./scanned_pdfs/antony-and-cleopatra_PDF_FolgerShakespeare.json
4:54:07 PM: The cached file DOES exist.

Sadece Çalışıyor

Her şey yolunda gittiğinde ve iyi çalıştığında her zaman mutlu olurum ve dürüst olmak gerekirse bu, bu kadar küçük bir iş için bunu etkinleştirmek için süper güçlü bir eklentidir. Bunun sadece Netlify site yöneticinizdeki bir ayar olmamasını şaşırtıcı buluyorum, ancak belki de çoğu insanın ihtiyaç duyduğu bir şey değildir. Canlı sitemi görmek isterseniz (muhtemelen bir daha güncellemeyeceğim, üzgünüm :), burada bulabilirsiniz: https://cache-test-camden.netlify.app/. Depo burada bulunabilir: https://github.com/cfjedimaster/eleventy-demos/tree/master/cache_test

fotoğrafı çeken josh Glauser üzerinde Sıçramayı kaldır

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.