Performans
Bu sayfa, paketlerin paket boyutuna ve çalışma maliyetine nasıl etki ettiğini ve çok sayıda simgenin nasıl oluşturulacağını açıklar.
Simgeler nasıl yüklenir ve çalışır
- Simge başına bir modül. Simge modüllerinin yan etkisi yoktur, bu yüzden paketleyiciler içe aktarmadığınız simgeleri ayıklar. Küçültülüp gzip ile sıkıştırıldığında ilk React veya Vue simgesi, paylaşılan çalışma zamanı dahil yaklaşık 4 KB, sonraki her simge ise yaklaşık 0,6 KB ekler.
- Önceden oluşturulmuş işaretleme. Durağan hâl bir dize olarak gönderilir; bu yüzden sunucuda da tarayıcıda da ilk boyamadan önce hesaplama gerekmez.
- İstek üzerine hareket. Hareket kodu yalnızca simge hareket ederken çalışır ve hareket bitince durur.
- Ortak kod. Tüm simgeler tek bir geometri modülünü, tüm hareketli simgeler tek bir çalışma zamanını paylaşır; bu yüzden tarayıcılar ve CDN'ler bu kodu yalnızca bir kez önbelleğe alır.
- CSS renkleri. Bir sayfadaki simgelerin rengini değiştirmek tek bir CSS değişikliğidir ve simgeleri yeniden oluşturmaz.
Büyük simge setleri
Her simge gölge ve vurgu için SVG filtreleri kullanır. Yüzlerce simge gösteriyorsanız yalnızca görünen satırları oluşturun ya da tarayıcının bir kez rasterleştirdiği <img> etiketlerinde statik SVG dosyalarını kullanın.
Derin içe aktarmalar
Geliştirme sunucuları çoğu zaman her simgeye başvuran paket dizinini tümüyle yükler. Bunu önlemek için her simgeyi kendi dosyasından içe aktarın:
ts
import Folder from "kubai-icons-react/icons/folder";