Genel bakış / Geliştirici ve kod / Kod Küçültücü
Geliştirici ve kod %100 tarayıcıda ve çevrimdışı

Kod Küçültücü

JavaScript'i Terser, CSS'i csso ile tarayıcınızda küçültün; bayt ve gzip kazancıyla birlikte.

Girdinizi yapıştırın veya yazın; sonuç anında görünür, hatalar girdinin altında gösterilir. Alanlar bir örnekle başlar: birine tıklayıp yazmaya başlayarak örneği değiştirin.

Dosyalarınız ve girdileriniz tarayıcınızdan asla çıkmaz – hiçbir şey yüklenmez.

Seçenekler

Üst düzey adlar, üst düzey karıştırmayı açmadıkça olduğu gibi kalır. Bu seçenek dosyalar arasında birbirini çağıran ya da HTML'den genel değişkenler kullanan betikleri bozabilir. Lisans yorumları /*! ile başlayanlar ya da @license veya @preserve içerenlerdir. Hedef, Terser'ın yazabileceği en yeni sözdizimini belirler. console çağrılarını ve debugger deyimlerini atmak "Kodu sıkıştır"ı gerektirir.

Sınırlar: 2.000.000 karakter. Boyutlar UTF-8 baytıdır. Gzip satırı yalnızca tarayıcınızda CompressionStream varsa görünür. HTML küçültülmez. Küçültme kodu değiştirir, bu yüzden yayınlamadan önce sonucu test edin. Kodunuz bu sayfada işlenir ve hiçbir yere gönderilmez.

40 KB'lık bir betiği elle küçültürseniz ilk yorum bloğundan sonra vazgeçersiniz. Bir kod küçültücü bunu tek geçişte yapar: boşlukları ve yorumları kaldırır, yerel adları kısaltır ve ifadeleri daha kısa biçimlerde yeniden yazar. Bu araç JavaScript'i (Terser ile) ve CSS'i (csso ile) işler ve siz yazarken sonucu girdinizin yanında gösterir.

Bir betiği adım adım küçültme

  1. Üstten JavaScript veya CSS seçin. Girdi kutusu kısa bir örnekle dolar.
  2. Kendi kodunuzu üzerine yapıştırın. Çıktı, yazmayı bıraktıktan yaklaşık 300 ms sonra güncellenir.
  3. Seçenekleri ayarlayın. JavaScript için bunlar Kodu sıkıştır, Değişken adlarını karıştır, Üst düzey adları karıştır, Sınıf ve işlev adlarını koru, console.* çağrılarını at, debugger deyimlerini at, ECMAScript hedefi ve yorum işlemedir.
  4. Kutuların altındaki bayt satırını okuyun, ardından Kopyala veya İndir'e basın. Dosyanın adı script.min.js veya styles.min.css'tir.

Pratikte hangi JavaScript anahtarları önemli

Karıştırma, yerel değişkenlerin ve parametrelerin adlarını kısaltır. cartTotal(items, taxRate) işlevinin içinde n(t,o) gibi bir şeye dönüşür. Üst düzey adlar ayrı bir konudur. Varsayılan olarak dokunulmadan kalırlar, çünkü başka bir dosya ya da satır içi bir onclick onları adıyla çağırabilir. Üst düzey adları karıştır'ı yalnızca kendi kendine yeten kod için açın; örneğin kendiniz paketlediğiniz bir modül.

console.*'ı atmak, bir ifadede kullandığınız sonuç taşıyanlar dahil her çağrıyı kaldırır. Günlüğe güveniyorsanız çıktıyı okuyun. Sınıf ve işlev adlarını koru, kodunuz .name okuduğunda ya da yığın izlerinin okunur kalması gerektiğinde önemlidir.

csso bir stil sayfasına ne yapar

csso margin: 0px 0px 0px 0px ifadesini margin:0 olarak yeniden yazar, renkleri kısaltır ve yorumları kaldırır. Kuralları yeniden yapılandır açıkken bildirimleri paylaşan kuralları da birleştirir: aynı color ve background-color'a sahip iki seçici virgülle ayrılmış tek bir kural olur. Bu çoğu dosya için güvenlidir. Basamaklamanız kuralların tam sırasına bağlıysa kapatın. Özel özellikler ve @media blokları yerinde kalır.

Boyut sayıları ve kesin olmaktan çıktıkları yer

Araç karakterleri değil UTF-8 baytlarını sayar; bu yüzden aksanlı harf ya da emoji dolu bir dosya, bir sunucunun gönderdiği şekilde ölçülür. Tarayıcınızda CompressionStream varsa bir gzip satırı da iki boyutu gösterir. Küçültülmüş kod gzip sonrasında çoğu zaman öncesinden daha az küçülür, çünkü gzip tekrarlanan boşlukları zaten ortadan kaldırır.

Girdi 2.000.000 karakterle sınırlıdır. JavaScript'teki bir sözdizimi hatası satırı ve sütunu gösterir. csso ise CSS hatalarını bildirmez: bozuk bir bildirim çıktıdan iletisiz kaybolabilir. HTML burada küçültülmez.

Yayınlamadan önce test edin ve tarayıcınızda kalanlar

Küçültme kodu değiştirir. Araç alışılmadık kod için aynı davranışı vaat etmez; bu yüzden küçültülmüş dosyada kendi testlerinizi çalıştırın. Terser ve csso bu sayfada çalışır. İlk kullanım, kitaplık dosyasını bu siteden yükler ve bunu ağ panelinde görebilirsiniz. Sonrasında bir düğmeye basmak hiçbir şey göndermez. Kodunuz yüklenmez ve araç onu asla çalıştırmaz.

Sık sorulan sorular (SSS)

Yalnızca dosyanın dışında hiçbir şey bu adları kullanmıyorsa. Satır içi olay işleyicileri ve işlevlerinizi adıyla çağıran diğer betikler bozulur; bu yüzden seçenek varsayılan olarak kapalıdır.