JavaScript Minifier (JS Kod Sıkıştırma)

JavaScript kodunu yapıştır ya da dosyalarını sürükle, Terser ile küçültülmüş halini anında al. Öncesi ve sonrası boyutu, kazancı ve gzip’lenmiş halini gör. Kodun tarayıcından çıkmaz.

JavaScript kodu

.js dosyalarını buraya sürükle, ya da . Birden fazla dosya bırakırsan sırayla birleştirilip tek dosya olarak küçültülür.

Küçültme seçenekleri

Varsayılan ayarlar kodun davranışını değiştirmeyecek şekilde seçildi. Aşağıdaki iki kutu, işaretlenirse programın gözlenebilir davranışını değiştirir.

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

  1. Kodu yapıştır ya da dosyaları bırak

    JavaScript kodunu kutuya yapıştır, ya da .js dosyalarını üzerine sürükle. Birden fazla dosya bırakırsan aralarına noktalı virgül konarak birleştirilir.

  2. Seçenekleri ayarla

    Yorumları silmek, ad kısaltmayı kapatmak ya da console çağrılarını atmak senin elinde. Varsayılanlar kodun davranışını değiştirmeyecek şekilde seçilidir.

  3. Kazancı gör

    Öncesi ve sonrası boyut, kazanç oranı ve çıktının gzip’li hali yan yana durur. Kod ayrıştırılamıyorsa hangi satır ve sütunda takıldığı yazar.

  4. Kopyala ya da indir

    Küçültülmüş kodu tek tıkla panoya al, ya da doğrudan .min.js dosyası olarak indir. Hiçbir adımda kodun sunucuya gitmez.

Küçültme tam olarak neyi atar?

Küçültme, kodu okunmaz hale getirmek değil, tarayıcının umursamadığı her karakteri atmaktır. Girintiler, satır sonları, açıklama satırları ve zorunlu olmayan noktalı virgüller çalışma anında hiçbir işe yaramaz; yalnızca indirilecek bayt sayısını büyütür. Aşağıdaki tablo, varsayılan ayarlarda hangi dönüşümlerin uygulandığını gösterir.

Dönüşüm Öncesi Sonrası
Boşluk ve girinti if (a) { b(); } if(a)b();
Yorumlar // toplamı bul topla(); topla();
Yerel değişken adları function f(){var toplamTutar=1;return toplamTutar} function f(){return 1}
Sabit ifadeler var ms = 60 * 60 * 1000; var ms=36e5;
Erişilmeyen kod if (false) { eskiYol(); } (tamamen atılır)
Gereksiz süslü parantez for (;;) { x(); } for(;;)x();

Neden Terser?

Bu araç, kodu düzenli ifadelerle kesip biçen bir betik değil; webpack, Rollup ve Vite gibi paketleyicilerin üretim çıktısını hazırlarken kullandığı Terser’ın kendisidir. Terser kodu önce gerçek bir sözdizimi ağacına çevirir, kapsamları çözer, sonra o ağacı yeniden yazar. Bu yüzden bir dize içindeki eğik çizgiyi yorum başlangıcı, bir düzenli ifade değişmezini bölme işlemi sanmaz.

Küçültücü sayfa açılırken indirilmez. Yalnızca ilk kez “Küçült” dediğinde yüklenir; araca göz atıp geçen biri o dosyayı hiç indirmez.

Yayına almadan önce çıktıyı kendi testlerinle bir kez çalıştırmak her zaman iyi bir alışkanlıktır. Bu araçta kullanılan ayarlar, davranışı değiştirmediği ölçülerek seçildi: otomatik noktalı virgül ekleme, düzenli ifade değişmezleri, şablon dizeleri, üreteçler, async/await, sınıflar ve özel alanlar dahil olmak üzere onlarca örnekte küçültülmüş kodun sonucu özgün kodunkiyle birebir aynı çıktı.

Sessizce bozan üç tuzak

Kendi yazdığı “boşlukları sil” betiğiyle küçültme yapan araçların bozduğu yerler hep aynıdır. Üçü de sözdizimi hatası vermez; kod çalışır, yalnızca yanlış çalışır.

Tuzak Neden bozar? Bu araçta
Otomatik noktalı virgül Satır sonundaki return, kendisinden sonraki satırı değil, boş değeri döndürür. Satırları körlemesine birleştiren bir araç bu davranışı tersine çevirir. Ağaç üzerinden yeniden yazıldığı için anlam korunur.
Eğik çizgi: bölme mi, düzenli ifade mi? a = b / c ile a = /re/g aynı karakteri kullanır. Ayrımı yalnızca dilbilgisel bağlam belirler. Ayrım ayrıştırıcı düzeyinde yapılır, tahmin edilmez.
Fonksiyon adının kaybolması İç içe bir fonksiyonun adı silinirse fn.name boş dizeye döner; bağımlılık kapları ve ad üzerinden çalışan yönlendirmeler sessizce çöker. Adlar varsayılan olarak korunur; kapatmak isteyen açıkça kapatır.
Dosyaların uç uca eklenmesi Noktalı virgülle bitmeyen bir dosyanın ardından parantezle başlayan bir dosya gelirse, ikisi tek bir çağrı ifadesi olarak okunur. Birleştirmede her dosyanın sonuna noktalı virgül konur.

Minify, uglify, compress ve gzip aynı şey değil

Terim Ne yapar? Nerede olur?
Minify (küçültme) Gereksiz karakterleri atar, adları kısaltır. Sonuç hâlâ geçerli JavaScript’tir. Derleme sırasında, bir kez.
Uglify Aynı işin eski adı. UglifyJS modern söz dizimini tam desteklemediği için yerini Terser aldı. Tarihe karıştı.
Obfuscate (karartma) Kodu bilerek okunmaz kılar; dizeleri şifreler, akışı bozar. Boyutu genellikle büyütür. Ayrı bir araç, ayrı bir amaç.
Gzip / Brotli Baytları aktarım için sıkıştırır. Tarayıcı açar, dosya diskte küçülmüş olmaz. Her istekte, sunucuda.

İkisi birbirinin yerine geçmez, birlikte çalışır. Küçültme tekrar eden adları kısalttığı için gzip’in bulacağı örüntüleri de artırır: önce küçültülüp sonra gzip’lenen bir dosya, doğrudan gzip’lenenden gözle görülür biçimde küçük olur. Yukarıdaki sonuç kutusunda hem küçültülmüş boyutu hem de o çıktının gzip’li halini birlikte görürsün.

Öne çıkan özellikler

Gerçek ayrıştırıcı

Kod, düzenli ifadelerle değil, üretim paketleyicilerinin kullandığı Terser ile sözdizimi ağacına çevrilerek yeniden yazılır.

Önce, sonra ve gzip

Kaç bayttan kaç bayta indiğini, kazanç oranını ve çıktının gzip’li boyutunu aynı anda gösterir.

Hatayı satırıyla söyler

Kod ayrıştırılamıyorsa hangi satırın hangi sütununda takıldığını yazar; sessizce yarım çıktı vermez.

Çoklu dosya birleştirme

Birden çok .js dosyasını bırak, aralarına noktalı virgül konarak birleştirilsin ve tek dosya olarak küçültülsün.

Ayarlanabilir agresiflik

Yorumları koru, ad kısaltmayı kapat, console çağrılarını at. Davranışı değiştiren seçenekler ayrıca işaretlenmiştir.

Sunucuya hiçbir şey gitmez

Küçültme tarayıcında çalışır. Kodun bize ulaşmaz, hiçbir yerde saklanmaz; kapalı kaynak bir projeyi de rahatça yapıştırabilirsin.

Sıkça Sorulan Sorular

Küçültme, kodun çalışmasını değiştirmeden dosya boyutunu düşürmektir. Girintiler, satır sonları, yorumlar ve zorunlu olmayan noktalı virgüller atılır; yerel değişken adları tek harfe iner; sabit ifadeler önceden hesaplanır. Sonuç hâlâ geçerli JavaScript’tir, tarayıcı ek bir işlem yapmadan çalıştırır.

Hayır. Küçültme tamamen tarayıcında çalışır; yazdığın ya da sürüklediğin kod hiçbir zaman bize ulaşmaz ve hiçbir yerde saklanmaz. Kapalı kaynak bir projenin dosyasını da rahatlıkla yapıştırabilirsin.

Terser. webpack, Rollup ve Vite gibi paketleyicilerin üretim çıktısını hazırlarken kullandığı kütüphanenin tarayıcı sürümü sayfaya gömülüdür. Kod düzenli ifadelerle kesilmez; gerçek bir sözdizimi ağacına çevrilir, kapsamlar çözülür ve ağaç yeniden yazılır.

Varsayılan ayarlarda evet. Ayarlar, davranışı koruyacak şekilde seçildi: üst düzey adlar korunur, fonksiyon ve sınıf adları silinmez, console ve debugger ifadeleri sen istemedikçe atılmaz. Yine de yayına almadan önce çıktıyı kendi testlerinle bir kez çalıştırmak iyi bir alışkanlıktır.

Evet. Terser modern söz dizimini bütünüyle okur: ok fonksiyonları, şablon dizeleri, sınıflar ve özel alanlar, üreteçler, async/await, isteğe bağlı zincirleme, nullish birleştirme, BigInt ve sayısal ayraçlar. Dosyanın başında import ya da export varsa modül olarak ayrıştırılır.

Evet, birden çok .js dosyasını aynı anda bırakabilirsin. Dosyalar bıraktığın sırayla, aralarına noktalı virgül konarak birleştirilir. Bu ayrıntı önemlidir: noktalı virgülle bitmeyen bir dosyanın ardından parantezle başlayan bir dosya gelirse, düz birleştirme ikisini tek bir çağrı ifadesi olarak okur ve kod bozulur.

Yalnızca kodun fonksiyon adlarını okumuyorsa. Bu kutu kapalıyken iç içe fonksiyonların adı silinir ve fn.name boş dizeye döner. Bağımlılık kapları, ad üzerinden çalışan yönlendirmeler, hata sınıflarının adına bakan günlükleme kodları bundan sessizce etkilenir. Kazandırdığı birkaç yüz bayt, çoğu projede riske değmez.

Sunucular JavaScript dosyalarını sıkıştırarak gönderir; kullanıcının gerçekten indirdiği bayt sayısı budur. Araç, küçültülmüş çıktıyı tarayıcının kendi gzip kodlayıcısından geçirip ölçer, tahmin etmez. Küçültme tekrar eden adları kısalttığı için gzip’in bulacağı örüntüleri de artırır: önce küçültülüp sonra gzip’lenen dosya, doğrudan gzip’lenenden belirgin biçimde küçüktür.

Araç yarım ya da bozuk bir çıktı üretmez. Ayrıştırıcı takıldığı yeri satır ve sütun numarasıyla birlikte bildirir, sonuç kutusu da kapalı kalır. Bu yüzden küçültücüyü hızlı bir sözdizimi denetleyicisi olarak da kullanabilirsin.

Küçültmenin amacı boyutu düşürmektir; okunaksızlık yan üründür ve kaynak haritasıyla geri alınabilir. Karartma ise kodu bilerek anlaşılmaz kılmayı hedefler: dizeleri şifreler, akışı bozar, sahte dallar ekler. Boyutu genellikle büyütür ve çalışmayı yavaşlatır. İkisi farklı işlerdir; bu araç küçültme yapar.

Hayır, bu araç tek yönlüdür. Küçültme geri alınamaz bir işlem değildir ama silinen bilgi (yorumlar, özgün değişken adları, biçimlendirme) geri getirilemez; bir biçimlendirici yalnızca okunabilir girinti ekler. Özgün kaynağa dönmek istiyorsan derleme sırasında kaynak haritası (source map) üretmen gerekir.

Kolayca hayalindeki işe kavuş!

Şimdi Kayıt Ol
Kolayca Üye Ol
Yazılım Bilgini Göster
Teklifleri Değerlendir