JavaScript Dosyalarını Sıkıştırmak

Birçoğumuz uygulamalarımız da bütün javascript metodlarımızı bir js dosyasına yazıp, bunu her sayfada import etmeyi çok severiz, en kolayı budur çünkü. Ama bazen bu dosyalar oldukça şişebiliyor ve performans problemlerine neden olabiliyor. Bu sorunu javascript dosyalarını sıkıştırarak aşabiliriz.

Daha önce herhangi bir javascript kütüphanesi kullandıysanız, kütüphane için gerekli dosyaları indirirken genellikle 2 farklı versiyonunu görürsünüz. Bunlardan birinin boyutu daha küçüktür ve “for production” gibi etiketle sunulur. Diğeri ise daha büyük boyutludur ve “for development” yazar. Bu durumda herhangi bir fikriniz yoksa muhtemelen büyük olanı indireceksiniz, o dosyanın daha çok method içerdiğini düşünebilirsiniz. Fakat bu dosyalar arasında hiçbir fark yok ve her ikisin de aynı içerik bulunuyor. Aradaki boyut farkı ise sıkıştırma sayesinde oluşuyor. Sizde kendi javascript dosyalarınızı sıkıştırarak boyutunu küçültebilir ve kendiniz için daha lightweight kütüphaneler oluşturabilirsiniz.

Bunun için ben google geliştiricileri tarafından geliştirilen closure isimli aracı kullanıyorum. Aracın kullanımı basit ama kısaca anlatmak istiyorum. Öncelikle http://closure-compiler.appspot.com/home adresine gidiyoruz. Sol tarafta bir editör var ve bu editör içerisinde javascript kodları var. “//ADD YOUR CODE HERE” yazan yerden sonrasını silerek kendi javascript dosyasının içindeki tüm kodları yapıştırın. Daha sonra yukarıdan ayarları yapabilirsiniz. Closure size 3 seviye sıkıştırma yöntemi sunuyor;

Whitespace only: En basit olan ve en az kazanç sağlayan, buna rağmen en güvenli yöntem. Burada kodunuzun içindeki comment’ler ve gereksiz boşluklar siliniyor. Kodunuzun okunulabilirliği neredeyse tamamen kayboluyor, bu yüzden kodunuzu son haline getirdikten sonra sıkıştırma işlemini uygulamanız tavsiye edilir. Yani sıkıştırılmış dosyalarınızı development ortamında değil production ortamında kullanın.
Simple: Bu yöntem ilk yöntemin yaptığı gibi commentleri ve boşlukları siliyor, ardından fonksiyon parametrelerini ve local değişkenlerinizi yeniden isimlendiriyor ve çok kısa isimler kullanıyor. Böylece boyut daha fazla küçülmüş oluyor. Eğer kodunuzun içerisinde string şeklinde bulunan değişkenler varsa (örneğin eval() fonksiyonun içerisinde) bu yöntem sıkıntı çıkarabilir. Onun dışında aynen orjinal kodunuzun çalıştığı gibi çalışacaktır.
Advanced:Bu yöntem diğer iki yöntemin yaptıklarının yanında en bazı işlemler daha uyguluyor. Bu yöntemi kullanmanızı tavsiye etmiyorum, çünkü kodu büyük ölçüde değiştirebiliyor. Bunun nedeni bu yöntemin uyguladığı işlemler;
- İsim değiştirme: Simple yöntemi sadece local parametrelerin ismini kısaltırken, bu yöntem global parametrelerin, fonksiyon isimlerinin ve class özelliklerinin isimlerini de değiştiriyor. Yani dosyanızın başka dosyalarla ilişkisi varsa ve fonksiyonlarınız başka yerlerde kullanılıyorsa arıza çıkacaktır.
- Ölü kodları kaldırma: Closure dosyanız içerisinde bazı kodlara hiç erişilmediğini farkederse bu kodları tamamen kaldırabilir. Aslında gerçekten de o dosya içerisinde o kodlar hiç çalışmıyor olabilir fakat o dosya dışında başka yerlerde çağırılıp kullanılıyorsa sorun çıkabilir.
- Yerine taşıma: Bu yöntem bazı fonksiyonlarınızın içindeki tüm kodları o fonksiyonun çağırıldığı yere taşıyarak fonksiyonu silebilir. Bu işlem güvenli olacak ve boyut kazancı sağlayacaksa gerçekleştirilir. Ayrıca bazı sabit değişkenleriniz de aynı şekilde değeri kullanıldığı yere taşınarak silinebilir. Fakat closure‘ın güvenli anlayışı sizinkiyle uymayabilir ve bu yöntem sıkıntı çıkarabilir.

Sıkıştırma işlemini yapmadan önce seçeceğiniz işleme göre sıkıntı çıkacağını düşündüğünüz noktalar varsa, closure‘ın sıkıştırma işlemi sırasında bu noktalara dokunmamasını sağlayabilirsiniz. Bunun için @expose annotation’u kullanılır. Dokunulmaz yapmak istediğiniz değişkenin başına açıklama satırı içerisinde @expose yazdığınızda bu değişken silinmeyecek, ismi değiştirilmeyecek veya yerine taşınmayacaktır. Benzer şekilde silinmesini istemediğiniz commentleriniz varsa (dosya bilgisi, lisans bilgisi gibi..) bu commentlerin de sıkıştırma işlemi ardından kalmasını @preserve annotation’u ile sağlayabilirsiniz.

Uygun sıkıştırma seviyesini seçtikten sonra “Compile” butonuna basarak sıkıştırılmış kodu görebilir, kopyalayarak sıkıştırılmış js dosyanızı oluşturabilirsiniz. Dediğim gibi bu işlemi uygulamanız tamamlandıktan sonra performans kazanmak için yapabilirsiniz. Development devam ediyorsa tavsiye edilmez 🙂

~Şarkı~