Svelte Optimizasyon Rehberi: Yüksek Performanslı Uygulamalar
Yazar: Burak Balkı | Kategori: API Development | Okuma Süresi: 10 dk
Svelte ve SvelteKit uygulamalarında performans optimizasyonu için derleme zamanı avantajları, bellek yönetimi, API stratejileri ve SSR tekniklerini içeren ka...
## Svelte Optimizasyon Rehberi: Performansın Mimari Temelleri
**Svelte**, modern web geliştirme dünyasında sanal DOM (Virtual DOM) kullanmayan yapısıyla devrim niteliğinde bir yaklaşım sunmaktadır. Bu rehberde, Svelte ve SvelteKit kullanarak geliştirdiğiniz uygulamaların çalışma zamanı (runtime) performansını nasıl maksimize edeceğinizi, bundle boyutlarını nasıl minimize edeceğinizi ve kurumsal düzeyde API entegrasyonlarını nasıl optimize edeceğinizi detaylandıracağız. **Svelte optimizasyon** süreçleri, derleme zamanı (compile-time) avantajlarını en üst düzeye çıkarmayı hedefler.
## Reaktivite Mekanizmalarının Verimli Kullanımı
Svelte'in reaktivite sistemi `
Svelte Optimizasyon Rehberi: Yüksek Performanslı Uygulamalar | Burak Balkı
işareti üzerine kuruludur. Ancak, gereksiz her reaktif ifade derleme aşamasında ek kod üretilmesine ve çalışma zamanında fazladan hesaplama yapılmasına neden olabilir. Reaktif ifadeleri gruplandırmak ve sadece gerekli değişkenleri izlemek performans açısından kritiktir.
```javascript
// Yanlış: Her değişimde tüm blok tetiklenir
$: {
console.log(name);
updateDatabase(data);
}
// Doğru: Sadece ilgili bağımlılıklar için ayrı bloklar
$: console.log(name);
$: data && updateDatabase(data);
```
Büyük veri setleri ile çalışırken, reaktif dizilerde doğrudan mutasyon yerine kopyalama yöntemi kullanmak Svelte'in değişikliği algılamasını sağlar ancak bellek yönetimini zorlaştırabilir. Bu noktada **immutable** veri yapılarını tercih etmek stratejik bir karardır.
## Svelte Store Optimizasyonu ve Bellek Yönetimi
Store yapıları, uygulama genelinde state paylaşımı için mükemmeldir. Ancak, aboneliklerin (subscriptions) doğru yönetilmemesi bellek sızıntılarına (memory leaks) yol açar. Bileşenler yok edildiğinde (onDestroy) aboneliklerin sonlandırılması zorunludur. Otomatik abonelik (`$store`) kullanımı bu riski minimize eder.
```javascript
import { writable, derived } from 'svelte/store';
export const rawData = writable([]);
// Ağır hesaplamaları derived store içinde yaparak memoization sağlayın
export const filteredData = derived(rawData, ($rawData) => {
return $rawData.filter(item => item.active);
});
```
> **Önemli Not:** `derived` store'lar, bağımlı oldukları store değişmediği sürece sonucu önbelleğe alır. Bu, pahalı hesaplamaların her render döngüsünde tekrarlanmasını önler.
## API Entegrasyonlarında Performans Stratejileri
API geliştirme ve tüketme aşamasında SvelteKit'in `load` fonksiyonları en büyük yardımcınızdır. Veriyi istemciye (client) göndermeden önce sunucuda (SSR) fetch etmek, First Contentful Paint (FCP) süresini iyileştirir.
```javascript
// +page.server.js
export async function load({ fetch, params }) {
const res = await fetch(`https://api.example.com/data/${params.id}`);
const data = await res.json();
return {
item: data
};
}
```
API isteklerinde `AbortController` kullanarak, bileşen unmount edildiğinde devam eden istekleri iptal etmek ağ kaynaklarını verimli kullanmanızı sağlar.
```javascript
import { onMount } from 'svelte';
onMount(() => {
const controller = new AbortController();
fetch('/api/heavy-task', { signal: controller.signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') console.log('İstek iptal edildi');
});
return () => controller.abort();
});
```
## SvelteKit ile Sunucu Tarafı Render (SSR) Optimizasyonu
SSR, SEO ve başlangıç yükleme hızı için kritiktir. Ancak, her sayfanın sunucuda render edilmesi sunucu yükünü artırabilir. Dinamik olmayan sayfalar için **Prerendering** özelliğini kullanmak performansı zirveye taşır.
| Teknik | Kullanım Durumu | Avantaj |
| :--- | :--- | :--- |
| SSR | Dinamik, kullanıcıya özel içerik | SEO uyumlu, hızlı FCP |
| CSR | Dashboard, etkileşimli araçlar | Düşük sunucu yükü |
| Prerendering | Blog, dökümantasyon | Statik hız, sıfır sunucu maliyeti |
```javascript
// +page.js
export const prerender = true; // Statik sayfa üretimi için
export const csr = false; // JavaScript gerekmeyen sayfalar için
```
## Bileşen Yaşam Döngüsü ve Kaynak Yönetimi
Svelte'de bileşenlerin oluşturulma ve yok edilme süreçleri çok hızlıdır ancak DOM manipülasyonları her zaman maliyetlidir. `tick` fonksiyonu, DOM güncellemelerinin tamamlandığını garanti altına almak için kullanılır ve asenkron işlemlerde yarış durumlarını (race conditions) engeller.
```javascript
import { tick } from 'svelte';
let message = 'Başlatılıyor';
async function updateMessage() {
message = 'Güncellendi';
await tick();
// Bu noktada DOM güncellenmiş durumdadır
console.log('DOM senkronize edildi');
}
```
## Bundle Boyutu ve Tree Shaking Teknikleri
Svelte, kullanılmayan kodları (dead code) temizleme konusunda oldukça başarılıdır. Ancak üçüncü parti kütüphaneler bundle boyutunu şişirebilir. Sadece ihtiyacınız olan fonksiyonları import etmek ve `svelte-check` ile tip kontrollerini yapmak kod kalitesini artırır.
```javascript
// Yanlış: Tüm kütüphaneyi yükler
import _ from 'lodash';
// Doğru: Sadece ilgili modülü yükler
import debounce from 'lodash/debounce';
```
## Hydration Süreçlerinin Optimize Edilmesi
Hydration, sunucudan gelen HTML'in istemci tarafında canlı bir uygulamaya dönüştürülmesi sürecidir. Büyük sayfalarda bu süreç ana thread'i bloke edebilir. Sayfanın alt kısımlarında kalan (below the fold) bileşenleri dinamik import ile yüklemek hydration yükünü azaltır.
```svelte
{#await import('./HeavyComponent.svelte') then { default: HeavyComponent }}
Svelte Optimizasyon Rehberi: Yüksek Performanslı Uygulamalar | Burak Balkı
ile işaretleyin.
2. **Key Kullanmamak:** `{#each}` bloklarında benzersiz anahtarlar (keys) kullanmamak, listenin her değişiminde tüm DOM öğelerinin yeniden oluşturulmasına neden olur.
3. **Büyük Store Yapıları:** Tüm uygulama durumunu tek bir devasa store'da tutmak. Parçalı store mimarisini tercih edin.
4. **Zombi Abonelikler:** Manuel abonelikleri unmount anında kapatmamak.
5. **Gereksiz Context Kullanımı:** Context API'yi reaktif veri paylaşımı için yanlış kullanmak (Context reaktif değildir, içindeki store reaktiftir).
## Performans İpuçları Özet Tablosu
| Alan | Teknik | Etki |
| :--- | :--- | :--- |
| Veri İşleme | `derived` store kullanımı | Yüksek |
| DOM | `each` bloklarında `key` kullanımı | Orta |
| Network | `AbortController` entegrasyonu | Orta |
| Bundle | Dinamik `import()` | Yüksek |
| Rendering | `svelte:options immutable={true}` | Yüksek |
## Sık Sorulan Sorular
**1. Svelte sanal DOM kullanmıyorsa değişikliği nasıl anlıyor?**
Svelte, derleme aşamasında kodunuzu analiz eder ve hangi değişkenin hangi DOM düğümünü güncellediğini belirleyen doğrudan JavaScript kodları üretir. Bu sayede çalışma zamanında bir karşılaştırma (diffing) yapmasına gerek kalmaz.
**2. SvelteKit'te `load` fonksiyonu neden performans için önemlidir?**
`load` fonksiyonu hem sunucuda hem istemcide çalışabilir. Veriyi sunucuda hazırlayarak istemciye hazır HTML gönderilmesini sağlar, bu da kullanıcının içeriği görme süresini (LCP) kısaltır.
**3. `immutable` seçeneği ne zaman kullanılmalıdır?**
Eğer uygulamanızda verileri her zaman yeni referanslarla (spread operator veya deep copy) güncelliyorsanız, `
Yükleniyor...
İçerik
{/if}
```
> **İpucu:** `local` geçişleri tercih ederek, sadece ilgili bileşen değiştiğinde animasyonun çalışmasını sağlayın. Bu, parent bileşen güncellendiğinde gereksiz animasyon tetiklenmelerini önler.
## Veri Önbelleğe Alma ve State Yönetimi
Kurumsal API geliştirmede, aynı verinin tekrar tekrar istenmesi büyük bir verimlilik kaybıdır. SvelteKit'in `cache-control` başlıklarını load fonksiyonlarında kullanmak, tarayıcı ve CDN düzeyinde önbellekleme sağlar.
```javascript
// +server.js
export function GET({ setHeaders }) {
setHeaders({
'cache-control': 'public, max-age=3600'
});
return new Response(JSON.stringify({ data: '...' }));
}
```
## Sık Yapılan Hatalar
1. **Aşırı Reaktivite:** Her değişkeni reaktif yapmak. Sadece değişimi takip edilmesi gerekenleri `
Yükleniyor...