Svelte'de Readable Store Kullanmayın

Arka Plan

Eğer Svelte kullanıyorsanız, durum yönetimi için birkaç türde store olduğunu biliyor olabilirsiniz. Bunlardan ikisi readable ve writable store'lardır.

Adından da anlaşılacağı gibi, writable bir store, durumunu değiştirmenize izin veren bir değiştirilebilir store'dır, oysa readable bir store sadece okuma için iyidir.

O zaman soru şu, eğer readable store statik ise, ilk etapta neden buna ihtiyacımız var? Bu bilgiyi bir js dosyasındaki bir nesneye saklayıp oradan veriyi alamaz mıyız?

Fark yaratır mıydı?

Açıklama

Uygulamam hakkındaki çoğu statik bilgiyi (örneğin renk şeması, ekran kırılma noktaları) readable storelarda tutardım.

Sitemin derleme boyutunu azaltmaya ve hızını artırmaya çalıştığım için, potansiyel iyileştirme alanlarını araştırıyorum. Bu yüzden bu değişkenleri readable store'dan JS nesnelerine taşımak ne fark yaratırdı diye kontrol etmeye karar verdim.

Bu yüzden readable storenın web sitemin derleme boyutu ve hızı üzerindeki etkisini görmek için küçük bir deney yapmaya karar verdim.

Yöntem

0-99 arasındaki sayıları gösteren küçük bir statik uygulama oluşturuyoruz ve bu sayıları 2 farklı formatta tutacağız.

1. JS Nesnesi

Aşağıda sunacağımız sayfa bulunmaktadır. Bu sadece 0-99 arasındaki tüm sayıları listelemektedir.

// src/routes/+page.svelte
<script>
	import { numbers } from "/src/data/numbers";
</script>

<div style="display:flex; flex-flow:wrap; margin:24px">
	{#each numbers as number}
		<span style="margin: 4px;">{number}</span>
	{/each}
</div>

Verilerin JS nesnesinden alındığı yer. Aşağıdaki kod, 0-99 arasında değişen bir sayı dizisi oluşturur ve bu diziyi dışa aktarır.

// src/data/numbers.js

let limit = 100;
export const numbers = Array.from({ length: limit }).map((_, index) => index);

2. Svelte Okunabilir Mağaza

Aşağıda readable sürümde sunacağımız sayfa bulunmaktadır, tek fark sayılar değişkeninin önüne $ (dolar) işareti eklenmiş olmasıdır çünkü bu değişken artık saklanan bir değişkendir.

// src/routes/+page.svelte 

<script>
	import { numbers } from "/src/data/numbers";
</script>

<div style="display:flex; flex-flow:wrap; margin:24px">
	{#each $numbers as number}
		<span style="margin: 4px;">{number}</span>
	{/each}
</div>

Verilerin JS nesnesinden alındığı yer. Bu, önceki dizi ile aynıdır, tek fark readable bir işlev içine alınmış olmasıdır.

// src/data/numbers.js

import { readable } from "svelte/store";
let limit = 100;
export const numbers = readable(
 Array.from({ length: limit }).map((_, index) => index)
);

Aşağıda oluşturulan basit sayfa gösterilmektedir:

Oldukça basit değil mi? Şimdi kullanıcılar için aynı sonuçları üreten bu iki sürüm arasındaki performans farkına bakalım.

Sonuçlar

1. Build Dosya Boyutu

Bu iki dosyayı derleyip Build klasörünün boyutunu görelim. Bu, readable store'ın herhangi bir ek yük oluşturup oluşturmadığı konusunda bize bir fikir vermelidir.

Yukarıda görebileceğiniz gibi, readable store kullandığımız derleme klasörü 205kb iken, JS sürümü 193kb olarak sonuçlanıyor. Bu dosyalar arasındaki fark ihmal edilebilir düzeyde diyebilirim.

Sayıları 99'dan 99999'a çıkardığımda, derleme boyutu farkı sadece 700KB idi, bu yüzden büyük nesneleri işlediğinizde bile, readable storenın derleme boyutunda büyük bir ek yük oluşturmadığı görülüyor.

Ancak, bu iki yapı aynı sonucu verdiğinden, daha basit syntax ve daha küçük derleme boyutuna sahip olduğu için düz-vanilya JS'yi seçmenin bir anlamı yoktur.

2. Sayfa yükleme hızı

Şimdi web sitemizde başka bir sayfamız olduğunu varsayalım, bu bir Hakkında sayfasıdır. Bu sayfa bu sayılar nesnesini hiç kullanmaz, bu yüzden bu iki yapının web sitemizdeki ilgisiz bir sayfanın yüklenme hızını nasıl etkilediğini görelim.

Aşağıda kurulumun nasıl göründüğünü görebilirsiniz.

Not: Sayılar, Hakkında sayfasında hiçbir şekilde kullanılmamaktadır. Bu sayfanın performansını nasıl etkileyeceğini şimdi göreceğiz.

Bu sefer sayıları 99.999'a çıkararak performans farkını net bir şekilde görelim.

Yukarıdaki resim, Hakkında sayfasının düz JS kullanılarak yüklenme hızını göstermektedir. Yükleme 62 ms sürede tamamlandı.

Yukarıdaki resim, Hakkında sayfasının readable store kullanılarak yüklenme hızını göstermektedir. Yükleme 77 ms sürede tamamlandı.

Yine, düz JS'nin readable storedan daha iyi performans gösterdiğini görüyoruz.

Sonuç

Elimizde sadece bir örnek boyutu olduğu ve bu iki seçenek arasındaki farkın büyük olmadığı düşünüldüğünde, bazıları düz JS'ye karşı readable storeyı destekleyen güçlü kanıtların hala olmadığını düşünebilir.

Ancak, neden daha karmaşık bir readable store syntax'ini kullanarak derleme boyutunu artırabilecek ve sayfa hızını azaltabilecek bir yapı kullanmalısınız? Bu bana mantıklı gelmiyor.

Okunabilir storeyı düz JS'ye karşı kullanmanın herhangi bir faydasını biliyor musunuz? Aşağıdaki yorumlarda bana bildirin.

O zamana kadar, mutlu hacklemeler!