Konu: JavaScript Dosyalarını Sıkıştırma Nasıl Yapılır?

[D®agon]

JavaScript kodunu küçültmek, baytlarca veriden tasarruf edilmesini sağlarken indirme, ayrıştırma ve çalıştırma işlemlerini de hızlandırabilir. Bunun için ben google geliştiricileri tarafından geliştirilen closure isimli aracı kullanıyoruz. Aracın kullanımı basit ama kısaca anlatmak istiyorum. [img width=500 height=226]http://www.uyanangenclik.com/gallery/1_04_05_15_11_03_31.png[/img] Öncelikle [url=http://closure-compiler.appspot.com/home] Tıklayın [/url] adresine  gidiyoruz. Sol tarafta bir editör var ve bu editör içerisinde javascript kodları var. [b]“//ADD YOUR CODE HERE”[/b] yazan yerden sonrasını silerek kendi javascript dosyasının içindeki tüm kodları yapıştırın. Daha sonra ayarları yapabilirsiniz. Closure size 3 seviye sıkıştırma yöntemi sunuyor; [b]Whitespace only: [/b] 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.     [b]Simple: [/b] 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.     [b]Advanced:[/b] 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;         [b]İsim değiştirme: [/b] 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. [b]Ölü kodları kaldırma: [/b] 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. [b]Yerine taşıma: [/b] 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.