CSS küçültücü
CSS dosyalarını küçült, tam olarak ne kadar kazandığını gör.
Tarayıcında çalışır. Yazdığın hiçbir şey bir yere gönderilmez.
- Kazanılan bayt miktarını gösterir
- Yorumları kaldırır
- Hiçbir şey yüklenmez
CSS nasıl küçültülür
- CSS'ini yapıştır.
- İstatistik satırındaki kazanılan boyutu kontrol et.
- Küçültülmüş CSS'i kopyala veya indir.
Neyin kaldırıldığı
- /* ... */ olarak yazılan yorumlar
- Kurallar ve bildirimler arasındaki boşluk ve satır sonları
- Kapatan bir süslü parantezden hemen önceki sondaki noktalı virgül
- csso'nun güvenle birleştirebildiği yerlerde yinelenen veya gereksiz kurallar
- İçinde hiç bildirim olmayan boş bırakılmış ekstra noktalı virgüller ve kural blokları
Tipik boyut kazançları
| Başlangıç noktası | Yaklaşık ne kadar küçülür |
|---|---|
| Yorumlu, elle yazılmış CSS | Yüzde 20 ile 30 |
| Zaten kompakt CSS | Yüzde 5 ile 10 |
| Bir önişlemciyle üretilen CSS | Yüzde 10 ile 20 |
Ne zaman küçültmeli, ne zaman küçültmemeli
- Aktif olarak düzenlerken değil, dağıtmadan hemen önce küçült; çünkü okunabilir bir stil dosyasında hata ayıklamak çok daha hızlıdır.
- Zaten gzip'li ve küçük servis edilen bir dosyayı küçültmeyi atla; boyut farkı ekstra derleme adımına değmez.
Küçültmenin en büyük farkı yarattığı yerler
- Birçok sayfada paylaşılan stil dosyaları; çünkü kazanılan baytlar her sayfa yüklemesiyle çarpılır.
- Çok sayıda tekrarlanan, birleştirilebilir kuralı olan büyük tasarım sistemleri veya bileşen kütüphaneleri.
- Elle yazılmış CSS'in başka bir küçültme adımı olmadan doğrudan servis edildiği, bir derleme hattı olmayan siteler.
- Sayfada gerçekten kullanılan sadece yardımcı sınıflara indirgenmiş bir CSS çatısı.
CSS küçültücü SSS
CSS'im ne kadar küçülecek?
Genelde yüzde 10 ile 30 arası; orijinalinde çok fazla yorum ve boşluk varsa daha fazla, zaten kompaktsa daha az.
Küçültme sayfamın görünümünü değiştirir mi?
Hayır. Küçültme sadece boşluk, yorum ve gereksiz sözdizimini kaldırır. Sayfana uygulanan kurallar aynı kalır.
Bu, yinelenen kuralları birleştiriyor mu?
Evet, güvenli olduğu yerde; bu da dosyayı sadece boşluk kaldırmaktan daha fazla küçültebilir.
Orijinal dosyayı saklamalı mıyım?
Evet. Düzenleme için okunabilir sürümü sakla, küçültülmüşü sadece üretimde kullan.
Bu hangi küçültücüyü kullanıyor?
Birkaç paketleyici eklentisinin de kullandığı bir CSS küçültücü olan csso. Ayrıca düz boşluk kaldırmanın ötesinde bazı yinelenen ve gereksiz kuralları da birleştirir.
Küçültülmüş CSS bir stil dosyasına yapıştırmak için hâlâ güvenli mi?
Evet, boşluğu alınmış standart CSS'tir. Herhangi bir tarayıcı veya derleme aracı onu orijinaliyle tamamen aynı şekilde okur.
Hâlâ ihtiyacım olan -webkit- gibi tarayıcı öneklerini kaldırıyor mu?
Hayır. Öneki olan özellikler ve değerler tam olarak yazıldığı gibi kalır. Küçültme sadece boşluğu, yorumları ve güvenle birleştirilebilir kuralları kaldırır, CSS'inin gerçekten bildirdiği bir özelliği asla kaldırmaz.
CSS özel özelliklerine (değişkenlere) ne oluyor?
Olduğu gibi kalırlar, -- adları ve değerleri dahil; çünkü küçültme özel özellikleri yeniden adlandırmaz veya çözmez.