İçeriğe geç
🛠️
Whiz Tools

JavaScript Minifier - Ücretsiz Çevrimiçi JS Kod İyileştirici

Boşlukları ve yorumları kaldırarak kod boyutunu azaltan ücretsiz JavaScript minifier aracı. JS dosyalarını anında optimize edin, herhangi bir kurulum gerektirmez.

JavaScript Minifier (Küçültücü)

Bu araç hakkında

Bu basit JavaScript minifier, kodunuzun boyutunu azaltmak için gereksiz boşlukları ve yorumları kaldırır. İşlevselliği korurken kodunuzu daha kompakt hale getirir.

  • Gereksiz boşlukları kaldırır (boşluklar, sekmeler, satır sonları)
  • Yorumları kaldırır (hem tek satır hem çok satırlı)
  • Dize değişmezlerini ve düzenli ifadeleri korur
  • Kod işlevselliğini sürdürür
Yükleme hesaplayıcısı...
📚

Belgeler

JavaScript küçültücü nedir?

JavaScript küçültücü, tarayıcının kodu çalıştırmak için ihtiyaç duymadığı fazladan boşluklar, satır sonları ve açıklamalar gibi karakterleri kaldırarak JavaScript kaynak kodunu küçülten bir araçtır. Küçültme işleminden sonra kod yine tamamen aynı işi yapar. Yalnızca dosya boyutu değişir.

Daha küçük JavaScript dosyaları daha hızlı indirilir ve yüklenir; bu nedenle küçültme, bir web sitesi yayına alınmadan önce uygulanan yaygın bir adımdır.

JavaScript küçültme nasıl çalışır?

Bu araç kodu her seferinde bir karakter okuyup yeniden oluşturur ve okuyucuların ihtiyaç duyduğu, ancak JavaScript motorunun ihtiyaç duymadığı her şeyi kaldırır. Şunları kaldırır:

  • Hem // single-line açıklamaları hem de /* multi-line */ açıklamaları; buna JSDoc tarzı açıklamalar da dahildir.
  • Kodu yalnızca daha kolay okunur hâle getirmek için bulunan fazladan boşlukları, sekmeleri ve boş satırları.

Başka hiçbir şeyi eklemez veya kaldırmaz. Kodda zaten bulunan noktalı virgülü, parantezi ya da başka herhangi bir karakteri asla silmez ve yeni noktalama işareti eklemez. Ayrıca aşağıdaki unsurlara dokunmaz:

  • Dizelerin içindeki metinler ("like this", 'like this') ve şablon dizelerinin içindeki metinler (`like this`), bu metinler boşluk içerse veya açıklama gibi görünse bile.
  • /[a-z]+/g gibi düzenli ifade değişmezlerine ve bunların tüm bayraklarına: d, g, i, m, s, u, v ve y.
  • Özgün kodda zaten bulunan her noktalı virgülü, virgülü ve köşeli parantezi.

Bazen iki belirteç arasındaki boşluk, anlamları değiştirilmeden kaldırılamaz. return a, tek bir sözcük olarak okunacağı için returna hâline getirilemez. Aynı durum, İngiliz alfabesi dışındaki harflerle yazılan adlar için de geçerlidir; bu nedenle typeof π ifadesindeki boşluk korunur. Bir boşluk kaldırıldığında iki belirteç birleşecekse araç bunun yerine tek bir boşluk bırakır.

Satır sonu da önemli olabilir. JavaScript bazen bir satırın sonunda otomatik olarak noktalı virgül ekler; bu kural Automatic Semicolon Insertion olarak adlandırılır. Bir satır sonunun silinmesi bu kuralı tetikleyebilecek veya engelleyebilecekse ya da satır sonu bir kapanış küme parantezinin } ardından geliyorsa araç orada tek bir yeni satır bırakır. Bu nedenle küçültülmüş kod her zaman tek satıra sıkıştırılmaz: bazı satır sonları kodun anlamını değiştirir ve korunmaları gerekir.

Bu JavaScript küçültücü nasıl kullanılır?

  1. JavaScript kodunu giriş kutusuna yapıştırın.
  2. "Minify" seçeneğini seçin.
  3. Sonucu; özgün boyut, küçültülmüş boyut ve yüzde olarak azalma ile birlikte çıktı kutusunda okuyun.
  4. Küçültülmüş kodu kopyalamak için "Copy" seçeneğini seçin.

Küçültme işlemi tarayıcı sekmesinin içinde gerçekleştirilir; bu nedenle kod işlenmek üzere herhangi bir yere yüklenmez. Araç ayrıca yapıştırılan kodu sayfa adresine kopyalar; bu da sonucu yer imlerine eklemeyi veya paylaşmayı kolaylaştırır. Dolayısıyla bu adresi görebilen herkes kodu da görebilir.

Örnek: bir işlevi küçültme

Önce:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Sonra:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Üç açıklamanın tümü kaldırılır ve girintiler yok olur. a+b ifadesinden sonraki noktalı virgül kalır; çünkü araç, kodda zaten bulunan bir noktalı virgülü asla silmez. const ifadesinden önceki satır sonu da kalır; çünkü bir kapanış } parantezinden sonra gelir.

Örnek: bir sınıfı küçültme

Önce:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Sonra:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Her yöntemin önünde ve sınıfın kapanış } parantezinden önce bir satır sonunun kaldığına dikkat edin. Bu satır sonlarının her biri özgün kodda bir kapanış } parantezini izler; bu nedenle Automatic Semicolon Insertion kuralını koruyan mekanizma bunları tutar. Her yöntemin içindeki noktalı virgüller de kalır.

Boyut azaltma formülü

Araç, çıktı kutusunun altında üç sayı gösterir: özgün boyut, küçültülmüş boyut ve azalma. Tüm boyutlar bayt değil, karakter sayısıdır. Azalma, en yakın tam sayıya yuvarlanan bir yüzdedir:

1reduction = round((1 - minified characters / original characters) x 100)
2

Yukarıdaki işlev örneği küçültmeden önce 213 karakter, sonra 103 karakter içerir. Dolayısıyla 1–103 / 213 = 0,5164, yani %51,64 olur ve araç %52 gösterir. Sınıf örneği 515 karakterden 304 karaktere düşer; bu da %40,97 olup %41 olarak gösterilir.

Bu küçültücünün sınırları

Bu araç yalnızca açıklamaları ve boşlukları kaldırır. Terser veya UglifyJS gibi derleme aşamasında kullanılan araçların aksine değişkenleri yeniden adlandırmaz, kullanılmayan kodu silmez veya dosyaları birleştirmez. Bu araçlar genellikle daha küçük çıktı üretir, ancak çalışmaları için bir derleme süreci gerekir. Bu araç ise kurulum gerektirmeden tarayıcıda anında çalışır; bu nedenle tam bir üretim sürecinden çok hızlı kontroller veya küçük kod parçaları için uygundur.

Sık sorulan sorular

JavaScript küçültücü neyi kaldırır?

Kodun çalışması için gerekli olmayan açıklamaları ve boşlukları kaldırır. Noktalı virgülleri, parantezleri veya kodun zaten parçası olan başka herhangi bir karakteri kaldırmaz.

JavaScript'i küçültmek çalışma biçimini değiştirir mi?

Hayır. Küçültülmüş kod, özgün kodla aynı sonuçları üretmelidir. Yalnızca biçim değişir.

Küçültülmüş kodda neden bazen satır sonları hâlâ bulunur?

Bir satır sonu, JavaScript'in Automatic Semicolon Insertion kuralı tarafından gerekli kılınabilir veya bir kapanış küme parantezinden } sonra gelebilir. Bu satır sonunu kaldırmak kodun davranışını değiştirebileceğinden araç, bu konumlarda onu silmek yerine tek bir yeni satır bırakır.

Küçültme sıkıştırmayla aynı şey midir?

Hayır. Küçültme, kaynak kodun kendisindeki karakterleri kaldırır. Gzip veya Brotli gibi sıkıştırma ise dosyayı bir ağ üzerinden aktarılmak üzere farklı biçimde kodlar. Web siteleri genellikle ikisini birlikte kullanır.

Kodum bir sunucuya gönderiliyor mu?

Küçültücünün kendisi tamamen tarayıcı sekmesinde çalışır ve kod küçültülmek üzere yüklenmez. Yapıştırılan kod sayfa adresinde saklanır; böylece sonuç paylaşılabilir veya yer imlerine eklenebilir. Bu nedenle kod, tarayıcının adres çubuğunda ve geçmişinde görünür.

Küçültülmüş kod özgün hâline döndürülebilir mi?

Boşluklar bir kod biçimlendiriciyle geri yüklenebilir; ancak ayrı bir kaynak haritası kaydedilmediyse açıklamalar ile özgün değişken ve işlev adları kaybolmuştur.

Kaynaklar

  1. MDN Web Docs. "Minification." MDN Glossary, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," bölüm 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," bölüm 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," bölüm 22.2.6, "Properties of the RegExp Prototype Object" (d g i m s u v y bayrak kümesi). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object