Minify JavaScript Çözümü

JavaScript Küçültme

 

Nedir : İnternet sitelerinde Ajax, dolayısıyla Javascript kütüphanelerinin kullanımının artmasıyla sayfaların yüklenme zamanı bir hayli artıyor. 25-30 kb’lık bir HTML dosyası için 80-90 kb Javascript ve CSS dosyası kullanılıyor.
Çözüm : Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını düşürebiliriz.
Uzman Yorumu : Yapılması geliştirme süresinde biraz zorluk oluştursa da yapılmalıdır. 

 

Genel Açıklama

"Minifying" kodu lüzumsuz baytları ortadan kaldırmayı ifade ediyor. Buna örnek olarak ekstra boşluklar satır sonları ve girinti örnek verilebilir. JavaScript kodunu sıkı bir şekilde tutmak bazı avantajlara sahip. Önbelleğe alınması istenmeyen satır içi JavaScript ve harici dosyalar için daha küçük dosya boyutu bir sayfanın her indirildiğinde oluşan ağ gecikmesini azalttığından bahsetmek mümkün. İkinci olarak harici JS dosyalarının ve JS kodunun satır içi olduğu HTML dosyalarının sıkıştırılması daha da artış gösterebilir. Üçüncü olarak, daha küçük dosyalar yüklenebilir ve web tarayıcıları tarafından daha hızlı bir şekilde çalıştırılabilirler.

Çeşitli araçlar Kapatma Derleyicisi, JS Min veya YUI kompresörü dahil olmak üzere JavaScript’i küçültmek için kullanılabilir. Gelişme dosyalarını küçültmek ve yeniden adlandırmak ve bunları bir üretim dizinine kaydetmek için bu araçları kullanan bir yapı programı oluşturulabilir. 4096 bayt veya daha büyük boyutta olan JS dosyaları küçültmek için tavsiye ediyoruz.  25 bayt veya daha fazla azaltılabilir herhangi bir dosya için bir fayda görmelisiniz. (Bundan daha azı fark edilir herhangi bir performans kazancıyla sonuçlanmaz.)

 

JavaScript Tavsiyeleri

HTML, CSS ve JavaScript kaynaklarınızı küçültmelisiniz:

  • HTML’yi küçültmek için HTML Minifier’i deneyin.
  • CSS'yi küçültmek için CSSNano ve csso'yu deneyin.
  • JavaScript'i küçültmek için UglifyJS'i deneyin. Kapanış Derleyicisi de çok etkilidir. Geliştirme dosyalarını küçültmek ve yeniden adlandırmak ve bunları bir üretim dizinine kaydetmek için bu araçları kullanan bir oluşturma işlemi oluşturabilirsiniz.

 

Alternatif olarak PageSpeed Modülü, kaynak minification de dahil olmak üzere sitenizi otomatik bir şekilde optimize etmek için bir Apache veya Nginx web sunucusu ile bütünleşiyor.

 

JavaScript’i ve CSS’yi Harici Yapmak

JavaScript ve CSS dosyaları tarayıcı tarafından önbelleğe alındığından dolayı gerçek dünyada harici dosyaları kullanılması genellikle daha hızlı sayfalar oluşturulmasına sebep oluyor. HTML belgelerinde satır içi olan JavaScript ve CSS, HTML belgesi her istendiğinde indiriliyor. Bu durum gereken HTTP isteklerinin sayısını azaltsa da HTML belgesinin boyutunun artmasına neden olmuş oluyor. Diğer bir yandan JavaScript ve CSS tarayıcı tarafından önbelleğe alınmış harici dosyalarda ise HTML isteklerinin sayısı artırılmadan HTML belgesinin boyutu azaltılıyor.