JavaScript Küçültme

Nasıl çalışır?

Kodunuzu sol panele yapıştırın; küçültülmüş hali birkaç an içinde sağ panelde belirir. Araç kodu gerçekten ayrıştırır, yani ne yazdığınızı anlar: boşlukları, satır sonlarını ve yorumları atar, if (x) { return a; } else { return b; } gibi yapıları return x ? a : b biçimine sadeleştirir, hiç çalışmayacak kodu (return'den sonrası gibi) siler. Yerel adları kısaltma seçeneği açıksa fonksiyonun içindeki toplam, urunler, kargoBedeli gibi adlar n, t, e gibi tek harflere iner; başka betiklerin çağırabileceği genel adlar (sepetToplami gibi en dıştaki fonksiyon adları) bilerek kısaltılmaz, sayfanız bozulmasın diye. console.log satırlarını yayına çıkmadan önce silmek isterseniz ikinci ayarı Silinsin yapın. /*! ile başlayan lisans yorumları her durumda korunur. Kodda söz dizimi hatası varsa küçültme yapılmaz; hatanın satırı, sütunu ve beklenmeyen işaret yazılır. Sonuç satırı önce ve sonraki boyutu bayt olarak, kazancı yüzde olarak gösterir.

Bu araç minify js, javascript minify, javascript minifier aramalarıyla da biliniyor.

Minify nedir?

Minify (küçültme), bir JavaScript dosyasını aynı işi yapan en kısa haline getirmektir. Üç adımı vardır: gereksiz karakterleri silmek (boşluk, satır sonu, yorum), ifadeleri sadeleştirmek (koşulu kısa yazıma çevirmek, hiç çalışmayacak kodu atmak) ve yerel adları kısaltmak. Dosya küçüldükçe tarayıcı betiği daha çabuk indirir ve daha çabuk ayrıştırır; bu da sayfanın etkileşime hazır olma süresini kısaltır.

Mangle (ad kısaltma) nedir?

Mangle, fonksiyonların içindeki yerel değişken ve parametre adlarının tek harfli adlarla değiştirilmesidir: urunler, kargoBedeli gibi adlar n, t olur. Yerel adlar fonksiyonun dışından görünmediği için bu güvenlidir ve küçültmenin en büyük kazançlarından birini sağlar. Genel adlar ise başka betikler ve HTML'deki onclick gibi çağrılar tarafından kullanılabileceği için kısaltılmaz.

Küçültmenin iki tuzağı

Birincisi genel adlardır. Sayfanızdaki bir düğme onclick="sepetToplami()" diye bir fonksiyonu çağırıyorsa o adın küçültmeden sonra da aynı kalması gerekir. Bu araç en dıştaki adları kısaltmaz, yalnız fonksiyonların içindeki yerel adları kısaltır; bu yüzden tek bir betik dosyasını küçültmek sayfadaki bağlantıları bozmaz. Kodunuz başka bir betiğin içindeki yerel bir değişkene adıyla erişmeye çalışıyorsa (eval ile ya da dize içinden) küçültme onu bozar; o durumda ad kısaltmayı kapatın.

İkincisi hata ayıklamadır. Küçültülmüş kodda hata olursa tarayıcı 1. satır, 18.342. sütun gibi bir konum gösterir ve bu konum özgün kodunuzda bir şey ifade etmez. Bu yüzden kaynağı her zaman küçültülmemiş haliyle saklayın, yayına küçültülmüş kopyayı koyun. Gerekirse JavaScript biçimlendirme aracı küçültülmüş kodu yeniden okunur hale getirir, ama kısaltılmış adlar geri gelmez.

Hangi durumda hangi ayar

Kendi sitenizin betiği: adları kısaltın, console satırlarını silin; en küçük sonucu verir. Başkasıyla paylaşacağınız ya da sonradan hata ayıklayacağınız bir betik: adları kısaltmayın; kazanç biraz azalır ama hata mesajları anlamlı kalır.

Bu araç tek bir dosyayı küçültür; birden çok dosyayı birleştirmez ve modül içe aktarmalarını (import) çözmez. Bir derleme aracıyla (webpack, Vite) çalışan projelerde küçültme zaten derlemenin içindedir; bu sayfa tek dosyalık betikler, WordPress eklentilerine eklenecek kod parçaları ve hızlı denemeler içindir.

Sık sorulanlar

JavaScript dosyası nasıl küçültülür?

Kodu bu sayfadaki sol panele yapıştırın; boşlukları, yorumları atılmış ve yerel adları kısaltılmış hali sağ panelde belirir. Kopyalayabilir ya da .min.js dosyası olarak indirebilirsiniz. Sonuç satırı kaç bayt kazandığınızı gösterir.

Küçültme kodumu bozar mı?

Tek bir betikte genellikle bozmaz: araç kodu ayrıştırıp anlamını koruyan dönüşümler yapar ve başka betiklerin çağırabileceği genel adları kısaltmaz. Kod bir yerel değişkene eval ya da dize içinden adıyla erişiyorsa ad kısaltma onu bozar; bu durumda Yerel değişken adları ayarını Hayır yapın. Küçültülmüş kodu yayına almadan önce sayfanızda bir kez deneyin.

"Kod okunamadı" hatası ne demek?

Kodda söz dizimi hatası var: kapanmamış bir parantez, tırnak ya da eksik bir virgül. Hata mesajı sorunun bulunduğu satırı, sütunu ve orada beklenmeyen işareti yazar. Kodu düzeltip yeniden yapıştırdığınızda küçültme kendiliğinden çalışır.

Kodum bir yere gönderiliyor mu?

Hayır. Küçültücü tarayıcınızın içinde çalışır; kodunuz bu sayfadan çıkmaz ve hiçbir sunucuya yüklenmez.