CSS Kapsamı ve Kullanılmayan Stiller

Büyük CSS dosyaları genellikle geçerli sayfada bulunmayan bileşenlerin stillerini içerir. Kullanılmayan her bayt ayrıştırma süresini, CSSOM oluşturma süresini ve aktarım boyutunu artırır. Tipik bir üretim uygulamasında, herhangi bir sayfada CSS'in %90'ı veya daha fazlası kullanılmıyor olabilir.

DevTools → Kapsam panelini açın (Cmd+Shift+P → Kapsam). Kaydı başlatın, sayfayla etkileşim kurun ve ardından kaydı durdurun. Panel, her CSS dosyasını kullanım yüzdesiyle gösterir ve kullanılmayan kuralları kırmızıyla vurgular. Analiz için kapsam verilerini JSON olarak dışa aktarın.

PurgeCSS, sınıf adlarını bulmak ve kullanılmayan CSS kurallarını kaldırmak için HTML, JS ve şablon dosyalarınızı tarar. Sınıf adlarına başvurabilecek tüm dosyaları kapsayacak içerik glob kalıplarını yapılandırın. Yanlışlıkla kaldırılmalarını önlemek için dinamik olarak kullanılan sınıfları (JS tarafından eklenenleri) koruma listesine alın.

Tailwind'in JIT derleyicisi, şablonlarınızda gerçekten kullanılan yardımcı sınıfları oluşturur. Kullanılmayan yardımcı programlar hiç oluşturulmadığı için ortaya çıkan CSS çok küçüktür; tam bir uygulama için genellikle 5-15 KB olur. Bu, ideal temizleme sonucudur.

Bir webpack veya Vite yapılandırmasında, tüm şablon dosyalarını kapsayan içerik glob kalıplarıyla PurgeCSS ekleyin. Koruma listesi seçeneği; Headless UI gibi kütüphanelerden gelen karmaşık dinamik sınıf kalıpları için dizeleri, düzenli ifadeleri ve derin koruma listesini kabul eder.

CSS Modülleri her dosya için benzersiz sınıf adları oluşturur ve paketleyici yapılandırmasıyla kullanılmayan modülleri ağaç sallama yöntemiyle kaldırır. Pakete yalnızca içe aktarılan CSS modülleri dahil edilir; bileşenle birlikte konumlandırma, kullanılmayan genel stilleri doğal olarak ortadan kaldırır.

Next.js gibi çerçevelerde CSS'yi rotaya göre kod bölümlendirmesiyle ayırın (sayfa başına CSS çıkarma) veya CSS modülleriyle dinamik içe aktarmalar kullanın. Her sayfa yalnızca kendi stillerini yükler; böylece kapsam analizinin uygulama geneli yerine sayfa bazında yapılması anlamlı hâle gelir.

Lighthouse'un "Kullanılmayan CSS'yi azaltın" denetimi, kullanılmayan kuralları kaldırarak elde edilebilecek olası bayt tasarrufunu tahmin eder. Kullanılmayan oranı yüksek olan belirli stil sayfası kaynaklarını belirler. Önce hangi dosyaları denetleyeceğinizi önceliklendirmek için bunu bir rehber olarak kullanın.

Kapsam analizi yalnızca kayıt sırasında görünür olan durumları yakalar. Stillerinin yanlışlıkla temizlenmesini önlemek için üzerine gelme durumları, modalın açık olduğu durumlar, hata durumları ve kimlik doğrulaması yapılmış durumlar kapsam kaydı sırasında manuel olarak tetiklenmelidir.

Tek parça genel stil sayfalarında, özellikler kaldırıldıkça kullanılmayan CSS zaman içinde birikir. Bileşen başına CSS (CSS Modülleri, Styled Components, Tailwind yardımcı programları) daha kolay temizlenir; çünkü stiller bileşenleriyle birlikte bulunur ve birlikte kaldırılır.

Büyük eski CSS dosyaları için: önce UnCSS veya PurgeCSS'yi yalnızca raporlama modunda kullanın. Kuralları kullanım sıklığına göre sıralayın. Açıkça kullanılmayan üçüncü taraf eklenti stillerini ayıklayıp silin. Özel durumlara ait stilleri yanlışlıkla kaldırmamak için aşamalı ilerleyin.

Chrome DevTools Kapsam paneli neyi ölçer?

DevTools Kapsamı ve Lighthouse ile yapılan CSS kapsam analizi, kullanılmayan kuralları belirler. PurgeCSS ve Tailwind JIT, ölü kodların kaldırılmasını otomatikleştirir. CSS Modülleri ve rota bazında bölümlendirme, kullanılmayan stillerin birikmesini önler. Birlikte CSS yükünü ve ayrıştırma süresini en aza indirirler.