Svelte'de Caching ile Deploy Süresini Azaltın

Arkaplan

Son zamanlarda günde bir blog yazısı yayınlama amacım olduğundan, web sitemi (www.dayelkoca.com) günde en az bir kez yayınlıyorum. Blog sayısı arttıkça, web sitesinde sunulan resim sayısı da artıyor.

Yükselen dağıtım süresi bir sorun olarak ortaya çıktı. Web sitesindeki resim sayısı arttıkça, Netlify'deki web sitesinin dağıtım süresi aşağıdaki gibi artıyor.

Dağıtım günlüğüne bakarsanız, dağıtım süresinin ana kısmının vite transformation fonksiyonu tarafından kullanıldığını görebilirsiniz:

Burada, resimler @sveltejs/enhanced-img kütüphanesini kullanarak daha küçük boyuta dönüştürülüyor.

Bu kütüphane, resimleri webp ve avif formatlarına dönüştürmek için temel olarak vite-imagetools kütüphanesini kullanıyor. Bu formatlar, jpg, png ve diğer geleneksel resim formatlarına göre daha iyi sıkıştırma verimliliğine sahiptir.

SvelteKit'te Resim Optimizasyonu

SvelteKit'te resim optimizasyonuyla ilgilenmenize gerek yok çünkü @sveltejs/enhanced-img bunu sizin için otomatik olarak yapıyor. Sözdizimi çok basit:

<script>
// Resim yolundaki -- ?enhanced -- ekini dikkate alın
import image from '$images/image.jpg?enhanced';
</script>

// Sadece enhanced:img etiketini ekleyerek SvelteKit'in resimlerinizi optimize etmesine izin verin
<enhanced:img src={image} />

Bu basit sözdizimi ile veri üzerinde büyük ölçüde tasarruf edebilirsiniz. Canlı bir demo yapalım.

Aşağıda bir resmin 2 versiyonunu kullanıyorum. Sol taraftaki optimize edilmemiş bir resim, sağ taraftaki ise SvelteKit ile optimize edilmiş bir resimdir.

Kaynak klasörümde sadece bir resim olduğuna ve resmi optimize etmek için özel bir şey yapmadığıma dikkat edin. Sadece daha önce paylaştığım sözdizimini kullanıyorum.

Optimize edilmemiş resim

Dosya boyutu: 915 kB

Optimize edilmiş resim

Dosya boyutu: 278 kB

Görüldüğü gibi, optimize edilmemiş ve optimize edilmiş resimler neredeyse aynı görünüyor, ancak optimize edilmiş resim boyut açısından optimize edilmemiş resmin 3 katı kadar küçük.

Bu nedenle, @sveltejs/enhanced-img kullanmanın bir düşünme gerektirmeyecek kadar basit sözdizimi olduğunu ve bize resimlerimizin boyutunu önemli ölçüde azaltmamıza yardımcı olduğunu güvenle sonuçlandırabiliriz.

Svelte Resim Optimizasyonu harika görünüyor. Ancak, dezavantajı nedir?

Şimdi artan dağıtım süresi olan açılış konumuzun üzerine geri dönelim. Bu durumun resim optimizasyon kütüphanesi tarafından neden olduğunu belirtmiştik, çünkü her dağıtımda bu kütüphane bir resmin birkaç sıkıştırılmış sürümünü oluşturuyor. Bu resimler, ekran boyutuna bağlı olarak veri boyutu daha küçük resimler sunmak için oluşturulur:

Ve bu resimler tümü (yani dönüştürülmüş) sitemizi oluşturduğumuzda oluşturulur. Sitemizdeki # resimler arttıkça, dağıtım süremiz sonuç olarak artacaktır.

Netlify'de ücretsiz bir seviyede olduğum için, aylık 300 dakika dağıtım sürem var. Bu cömert bir teklif olsa da, bu beni kesinlikle her gün bir blog yayınlamama izin vermeyecek, çünkü zaten her biri 8 dakika sürüyor. Ve bu dağıtım süresi, siteye daha fazla resim ekledikçe önemli ölçüde artıyor.

Bu ayrıca, web sitesinde hızlı çözümler denememi ve test etmemi engelliyor, çünkü siteyi dağıtılmasını beklemek için en az 5 dakika beklemem gerekiyor. Bu çok yavaş!

Çözüm

Dağıtım süremin neden daha uzun sürdüğü, tüm resimlerin her bir yapıda dönüştürülmesinden kaynaklanıyordu. İdeal olarak, yalnızca yeni resimler dönüştürülmeli, daha önceden dönüştürülmüş resimler önbellekten alınmalıdır.

Bu tam olarak @sveltejs/enhanced-img geliştiricilerinin son güncellemelerinden birinde ekledikleri özellik:

Bir önceki bir sürümünü kullanıyordum @sveltejs/enhanced-img ve resimlerim her yapıda sıfırdan dönüştürülüyordu.

Dolayısıyla, kütüphaneyi sürüm 0.2.0'a güncelleyerek sorunumu çözmemi sağladı ve dağıtım sürelerim gece boyunca dramatik şekilde azaldı:

Sonuç

Netlify'deki uzun dağıtım süresi hakkında kafamı karıştırıyordum çünkü bu, iş akışımda büyük bir verimsizlik yaratıyordu. Dahası, Netlify'de ek inşa süresi satın almam gerekiyordu, bu da bana para mal olacaktı.

Kendimi yaratıcı biri olarak görmek istiyorum, çünkü başka biri sadece ek süreyi satın alır ve bu sorunu çözerdi.

Bazı insanlar bu harika paketi kullanmayı bile bıraktı çünkü yavaş olduğu için:

Ama ben değilim. Bu sorunun çözümünü bulmak oldukça zaman aldığı için, umarım siz (okuyucu) bu blog yazısıyla bu sorunu hemen çözebilirsiniz.

Mutlu kodlamalar!