Google Chrome Coverage Aracı ile Kullanılmayan JavaScript ve CSS Kodlarını Tespit Etme
Merhaba, bu yazıda Google Chrome geliştirici araçlarından Coverage ile kullanılmayan JavaScript ve CSS kodlarımızı nasıl tespit edebileceğimizden bahsedeceğim.
Google Chrome geliştirici araçlarındaki bu özellik, kodun kullanılmayan kısımlarını kolayca belirlememize ve bu sayede istersek kaldırabilmemize olanak sağlar.
Bu Aracı Neden Kullanmalıyız?
Her uygulama genellikle zaman içinde çok sayıda JavaScript ve CSS kodu içerir ve bunların bir kısmı artık kullanılmayan atıl kodlardan oluşur. Buna örnek olarak, sayfamızda herhangi bir UI kütüphanesinden sadece button veya input bileşenini kullanacağız diyelim. Eğer biz sadece kullanacağımız komponent yerine bütün kütüphaneyi eklersek ihtiyacımız olmayan kodları da dahil etmiş oluruz. Yani sayfamıza ihtiyaç duymadığımız bir sürü JavaScript ve CSS indirmiş oluruz. Kullanılmayan bu kodları kaldırmak sayfaların yüklenme sürelerini hızlandıracağı gibi mobil cihazlardan gelen kullanıcıların hücresel verilerinden tasarruf etmesini de sağlayacaktır. Ayrıca kodumuz daha yalın olacak ve uygulamamızın bakımını ve geliştirilmesini daha kolay hale getirecektir.
Coverage Aracını Aktif Etme
Coverage aracını aktif etmek için aşağıdaki adımları takip edin.
- Geliştirici araçlarını açın.
- command + option + I (Mac)
- Ctrl + Shift + I (Windows, Linux) - Komut menüsünü açarak Show Coverage yazın.
- command + shift + P (Mac)
- Ctrl + Shift + P (Windows, Linux)
Coverage aracını açtığınızda aşağıdaki şekilde görünecektir.
Kod Kapsamını Kaydetme
Coverage sekmesini açtıktan sonra, analizin başlaması için ekranda beliren yeniden yükle ikonuna tıklayın. Tıkladığınızda sayfa yenilenecek ve indirilen JavaScript ve CSS dosyaları listelenecektir. Analizi durdurmak ve sonuçları görmek için aynı alanda bulunan kırmızı ikona tıklayın. Bu işlemin ardından aşağıdaki gibi bir görüntüyle karşılaşacaksınız.
- URL kolonu, analiz edilen dosyanın URL’idir.
- Type kolonu, analiz edilen dosyanın türüdür. CSS, JavaScript veya her ikisi de olabilir.
- Total Bytes kolonu, analiz edilen dosyanın byte cinsinden olan toplam boyutudur.
- Unused Bytes kolonu, analiz edilen dosyanın içerisinde bulunan kodların byte cinsinden kullanılmayan toplam boyutudur. Ayrıca bu kolonda kullanılmayan boyutun yüzde cinsinden değeri de gösterilir.
- Usage Visualization kolonu, analiz edilen dosyanın kullanılan ve kullanılmayan kodlarının görsel halini gösterir. Kırmızı bölüm kullanılmayanı temsil eder.
Kullanılan ve Kullanılmayan Kod Bloklarını İnceleme
Analiz sonucunda çıkan listeden bir satırı seçtiğinizde ilgili dosya açılacaktır. Burada kırmızı olarak işaretlenen kod blokları, kodun hiç kullanılmadığı anlamına gelir. Diğer renk ise kod bloğunun kullanıldığı anlamına gelir. Burada dikkat edilmesi gereken nokta, bu analizin yapıldığı sırada gerçekleşen eylemlere göre verilerin toplanması ve hesaplanmasıdır. Yani belirli durumlarda çalıştırılacak bir kod bloğu, o an çalışmadığı için hiç kullanılmıyor olarak gösterilecektir. Bu yüzden kullanılmayan kodları kaldırmayı düşündüğünüzde bu duruma dikkat etmelisiniz.
Sonuç
Projelerimizde atıl kodların bize ne gibi etkileri olduğunu, bu atıl kodların nasıl tespit edilebileceğini, projemizden nasıl kaldırabileceğimizi ve nelere dikkat etmemiz gerektiğini açıklamaya çalıştım.
Sonraki yazılarda görüşmek üzere!
