İstemciye giden JavaScript'i küçük tutmak
Portfolyo sitesinden 600 KB'lık 3D kütüphanesini çıkardım. Neyi neden kaldırdığımı ve yerine ne koyduğumu anlatıyorum.
- Yayın
- Okuma
- 1 dakika
- Konu
- Performans, React
Uslu’ya imlecini yaklaştır; kısa bir yolculuğa eşlik etsin.
Bu sitenin ilk sürümünde ana sayfada bir 3D klavye, sayfada zıplayan bir karakter ve fareyle eğilen kartlar vardı. Gösterişliydi ama her ziyaretçiye yüzlerce kilobaytlık Three.js gönderiyordu ve telefonlarda fan sesi duyuluyordu.
Neyi kaldırdım?
threeve 3D sahnelercobeküresi- Fare takip eden ışık ve eğim efektleri
- Sonsuz kayan teknoloji bandı
Ne kaldı?
İstemci tarafında yalnızca üç küçük parça çalışıyor: tema değiştirici, ⌘K arama menüsü ve sayfa açılışındaki isim animasyonu. Geri kalan her şey sunucuda üretilen HTML.
// Etkileşimli parçalar "use client" ile izole, gerisi Server Component.
"use client";
export function ThemeToggle() { /* ... */ }Sonuç
Sayfa daha hızlı açılıyor, okuması daha kolay ve en önemlisi içerik öne çıkıyor. Bir portfolyonun görevi ziyaretçiyi etkilemek değil, ne yaptığınızı açıkça göstermek.