CSS Küçült _

CSS küçültme nasıl çalışır?

Küçültücü, korunan bölgeleri (dize sabitlerini ve url() değerlerini) katlamanın ve kaldırmanın güvenli olduğu düzenlenebilir boşluklardan ayırt eden, duruma duyarlı bir belirteçleyiciyle stil dosyanızı inceler.

1. Dizeler ve URL'ler korunur. Başka herhangi bir dönüşümden önce belirteçleyici, her tırnaklı dizeyi ("…" veya '…') ve her url(…) argümanını tanımlar ve bunları değiştirmeden saklar. Sonraki geçişler bu baytlara hiç dokunmaz; dolayısıyla boşluklu bir background-image URL'si veya noktalama işareti içeren bir content özelliği birebir korunur.
2. Yorumlar kaldırılır. Geçiş açıkken /* … */ blokları kaldırılır. Lisans yorumu geçişi de açıksa, /*! … */ blokları korunur; böylece MIT, Apache ve BSD lisans başlıkları çıktıda yer alır.
3. Boşluklar katlanır. Her boşluk, sekme ve satır sonu dizisi tek bir boşluğa katlanır; ardından CSS yapısal karakterleri olan {, }, ;, : ve , etrafındaki boşluklar tamamen kaldırılır. Seçici ve değer listeleri, tarayıcının ayrıştırıcısının okuduğu şekilde yeniden akar.
4. Değerler optimize edilir. İsteğe bağlı geçişler, hex renk kodlarını küçük harfe çevirir; eşleşen 6 basamaklı hex kanallarını 3 basamaklı kısaltmaya katar (#aabbcc → #abc) ve sıfır değerlerinden boyut birimlerini kaldırır (0px → 0). Sıfır birimi geçişi, birimlerin anlamlı olduğu transform() çağrılarının içindeki değerleri atlar.
5. Bayt tasarrufları raporlanır. Hem özgün hem de küçültülmüş metin, bir CDN veya HTTP sunucusunun kabloda gördüğü aynı UTF-8 bayt sayısı olan new TextEncoder().encode(…).byteLength ile ölçülür. Metrik şerit özgün boyutu, küçültülmüş boyutu, tasarruf edilen baytları ve tasarruf yüzdesini gösterir.

CSS neden küçültülür?

• Render engelleyen yükleme daha hızlı. Tarayıcılar CSS'yi ayrıştırmayı bitirmeden tek bir piksel çizmez. Yüzde 30'luk stil dosyası azalması bu engeli kısaltır, First Contentful Paint'i iyileştirir ve doğrudan Lighthouse Performans puanınıza yansır.
• Daha düşük CDN egress faturaları. CloudFront, Cloudflare ve Fastly gigabayt egress başına fatura keser. Her sayfa görüntülemesinde gönderilen bir stil dosyasından %20 tasarruf, aylık birkaç milyon görüntülemeyi aştıktan sonra faturada gerçek bir kalem haline gelir.
• Daha küçük gömüler ve e-posta CSS'i. İşlemsel e-posta şablonları Outlook ve Gmail görüntüleme tuhaflıklarına karşı CSS'lerini satır içine alır ve her fazladan bayt sizi Gmail'in 102 KB kırpma eşiğine yaklaştırır. Satır içine almadan önce küçültmek, iletiyi sınırın altında tutar.
• Derleme aracı bağımlılığı yok. Tek seferlik hızlı işler, derleme hattı olmayan eski repolar ve yalıtılmış ortamlar her zaman Node araç zincirine yer bulamaz. Bu adımı PostCSS, cssnano veya başka herhangi bir şey kurmadan burada çalıştırabilirsiniz.

Yaygın uygulamalar

CSS küçültme, neredeyse her ön uç derleme hattının sonunda ve bayt sayılarının önemli olduğu çeşitli çalışma zamanı bağlamlarında karşımıza çıkar.

• Prodüksiyon derleme hatları: Webpack, Vite, Rollup ve Parcel'ın hepsi prodüksiyon modu varsayılanlarında bir CSS küçültme adımıyla gelir. Burada taahhütten önce adımı çalıştırmak, tam bir derlemeyi tetiklemeden çıktıyı doğrulamanızı sağlar.
• <style> etiketlerine CSS gömmek: kritik CSS'yi HTML belgesine satır içi olarak alan sunucu taraflı render eden çerçeveler, bağımsız stil dosyalarıyla aynı bayt tasarrufundan yararlanır ve daha küçük satır içi CSS, Time to First Byte'ı azaltır.
• İşlemsel ve pazarlama e-postası: e-posta HTML'si tüm CSS'yi satır içine alır; dolayısıyla stil dosyasındaki her kilobayt toplam ileti boyutuna eklenir. Satır içine almadan önce küçültmek, iletileri ESP boyut sınırlarının oldukça altında tutar.

Uygulamalı bir örnek

İki boşluklu girintili, seçiciler arasında boş satırları olan, üstte bir lisans yorum bloğu bulunan ve #FFFFFF gibi ayrıntılı hex renkleri ile margin: 0px gibi sıfır-dolgulu kenar boşlukları olan 1 KB'lık bir kural seti yapıştırın. Her seçenek açıkken çıktı yaklaşık 600 bayta küçülür — %40 tasarruf — oluşturulan sayfa ise kaynakla bayt eşit görünür.

Küçültme CSS davranışımı değiştirir mi?

Hayır, varsayılan geçişlerde. Küçültücü yalnızca CSS ayrıştırıcısının zaten attığı baytları kaldırır — boşluklar, yorumlar, isteğe bağlı son noktalı virgül — ve birimlerin anlamlı olduğu transform() içini atlar. Her seçici, özellik ve değer korunur.

SCSS veya LESS ile çalışır mı?

Yalnızca düz CSS'e derledikten sonra çalışır. SCSS ve LESS sözdizimi (değişkenler, iç içe geçme, karışımlar, & üst seçiciler) geçerli CSS değildir ve küçültücü bunu bozar. Önce ön işlemci kaynağınızı derleyin, ardından derlenmiş çıktıyı buraya yapıştırın.

Lisans yorumlarım neden kaldırılıyor?

"Yorumları kaldır" varsayılan olarak açıktır ve her /* … */ bloğunu temizler. /*! ile başlayan blokları korumak için "/*! lisans yorumlarını koru" seçeneğini etkinleştirin. MIT, Apache ve BSD'nin hepsi, dağıtılan CSS'e copyright başlığının dahil edilmesini zorunlu kılar.

Ne kadar tasarruf edebilirim?

Elle yazılmış CSS genellikle yüzde 15 ile 35 arasında düşer. Yoğun yorumlu veya derin girintili, çok sayıda renk sabitiyle dolu dosyalar yüzde 40'a ulaşabilir. Sass veya CSS-in-JS'den derlenen çıktı çoğunlukla kısmen zaten küçültülmüştür ve daha az tasarruf sağlar — genellikle yüzde 5 ile 15 arasında.

Bir tarayıcı sekmesinde CSS küçültmeyi çalıştırmak Node araç zincirini tamamen atlatır. Stil dosyasını yukarıya yapıştırın, geçiş seçeneklerini ne kadar agresif olmasını istediğinize göre ayarlayın, ardından çıktıyı kopyalayın veya .min.css olarak indirin. Yükleme yok, hesap yok, satıcı kütüphanesi yok.