JavaScript Nasıl Küçültülür — Önerilen Araçlar ve Yöntemler

Çoğu kullanıcı, zarif bir web tarama deneyimi ister ve JavaScript, geliştiricilerin bu yüksek deneyimi sunmaları için uzun süredir favori olmuştur.

Ancak JavaScript, yalnızca sitelerin daha güzel görünmesini sağlamak için orada değildir. Ayrıca web sitesinin performansını ve başarısını doğrudan etkiler. Bir web sitesini hızlandırmak veya sayfa yükleme süresini kısaltmak – JavaScript geliştirmenin temelini oluşturan iki kavram – kullanıcı deneyimini geliştirmek için çok önemli faktörlerdir.

Web sitenizin performansını en kısa sürede artırmak istiyorsanız, JavaScript küçültmeye aşina olmanız gerekir. İşlevselliğini değiştirmeden JavaScript kaynak kodunuzdan tüm gereksiz karakterleri çıkarmanıza yardımcı olur. Dahası, web sitenizin yükleme süresini ve bant genişliği kullanımını azaltacaktır.

JavaScript küçültme zor olabilir. Bu makalede, WordPress ve WordPress olmayan web siteleri için JavaScript kodunuzu küçültmenize yardımcı olacak bir kursun grafiğini çıkaracağız.

JavaScript Nedir?

JavaScript, hem istemci hem de sunucu tarafında etkileşimli web siteleri oluşturmak için metin odaklı bir betik dilidir. Yaygın kullanımını açıklayan çoğu dilden daha basit ve daha az karmaşık bir dildir.

HTML ve CSS bir web sitesinin yapısını oluştururken, JavaScript, kullanıcıların ilgisini çekmek için web sitenize etkileşim getiren karmaşık özellikler ekler. Örneğin JavaScript, kayan video müzik kutusu, 2B/3B videolar ve etkileşimli haritalar gibi karmaşık öğeler sunar.

Özellikle, web tarayıcıları JavaScript'i anlayabilir. Bu nedenle, HTML ve CSS'nin yanı sıra, web geliştirme ile ilgileniyorsanız seçmek için yeterli bir seçimdir. Tüm tarayıcılarda herhangi bir engel olmadan çalışan yüksek düzeyde etkileşimli bir web sitesi oluşturmanız gerekiyorsa, JavaScript kullanabileceğiniz en güvenilir seçenektir.

Kod Küçültme Nedir?

Minimizasyon, minimizasyon olarak da bilinir. Kod küçültme, yerden tasarruf etmek, sayfa yükleme sürelerini azaltmak ve web sitesi bant genişliği kullanımını azaltmak için kodu optimize etmek anlamına gelir. Ancak, en büyük endişe, işlevselliği değiştirmeden kodu en aza indirmektir.

Kod küçültme, HTML, CSS ve - birazdan göreceğimiz gibi - JavaScript dahil olmak üzere tüm temel programlama teknolojilerinde mümkündür. Ancak süreç anlık değildir. Bazı çalışmalar, kodu işlevsel tutarken daha kompakt hale getirir.

JavaScript kodunu küçültmek için onu ayrıştırmalı, sıkıştırmalı ve çıktıyı almalısınız. Küçültüldükten sonra, çıplak gözle neredeyse okunamaz hale gelmelidir. Gereksiz tüm boşlukları, yorumları, yeni satır karakterlerini ve başlangıçta kodu okunaklı yapan her şeyi kaldırdınız.

Kodda başka değişiklikler de yapmanız gerekebilir - örneğin, işlevleri satır içine alma, blok sınırlayıcıları kaldırma, örtük koşul kullanma veya yerel değişkenleri yeniden yazma.

Küçültülmemiş ve Küçültülmüş JavaScript Kod Örnekleri

Bazı örnek kodlara bir göz atalım. Bu ilk blok normal, küçültülmemiş JavaScript'tir:

 // program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

Şimdi aynı kodun küçültüldüğünde nasıl göründüğüne bakalım:

 function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

Gördüğünüz gibi, ikinci kod bloğu çok daha küçük ve daha kompakt. Bu, daha hızlı yüklenip işleneceği, sayfa yükleme süresini azaltacağı ve içeriği hızlandıracağı anlamına gelir.

Burada 529 baytı 324 bayta indirdik, 205 bayt boş alan kazandık ve sayfa yükünü neredeyse %40 oranında azalttık.

529 sayfalık bir kitabı alıp 324 sayfalık bir kitap haline getirmek gibi. Tabii ki, bir insan onu okumakta zorlanacaktı, ancak bir makine sorunsuz bir şekilde onu hızlandıracaktı.

Tek bir küçültülmüş dosyaya birden çok JavaScript dosyası bağlanırken, kod küçültme, sunucuya yapılan HTTP isteklerinin sayısını azaltır. Bu aynı zamanda sitenin bant genişliği tüketimini de azaltır. Ayrıca, kod küçültme, bir komut dosyasının çalışma süresini kısaltır - İlk Bayt Zamanınızı (TTFB) azaltan her şey.

JavaScript Kodunu Neden Küçültmelisiniz?

İlk kodu yazarken, çoğu geliştirici öncelikle işlerin yapılmasına odaklanır. Bu yolda, kodu gelecekte onunla çalışacak diğer kişiler için daha okunabilir hale getirmek için çok sayıda yorum, boşluk ve değişken kullanma eğilimindedirler.

JavaScript, mükemmel bir programlama dili olmasına rağmen, web sayfalarını yavaşlatarak etkiler. Yer kazanmak ve sayfa yükleme hızınızı artırmak için JavaScript kodunu küçültmelisiniz.

JavaScript kodunun küçültülmüş sürümü, dosya boyutunu %30-90'a kadar azaltabilir. Sonuç olarak, JavaScript küçültme, tüm geliştiriciler için tanıdık bir ritüel haline geldi.

Her büyük JavaScript Kitaplığı geliştiricisi (Angular, Bootstrap vb.), üretim dağıtımı için JavaScript'in küçültülmüş bir sürümünü sağlar. Ve her biri bunu belirtmek için bir min.js uzantısı kullanır.

JavaScript Kodunu Küçültmenin Faydaları

JavaScript küçültmeyi kullandıktan sonra elde edeceğiniz faydaların kısa bir özeti:

• Sayfa yükleme süresinin azaltılması
• Web sitenizin daha az bant genişliği tüketimi
• Alt komut dosyası yürütme süresi
• Sunucuya daha az HTTP isteği (ve daha hafif yük)
• Hırsızlığa karşı koruma (küçültülmüş veya çirkinleştirilmiş sürümlerin okunması ve yeniden kullanım için çalınması karmaşıktır)

JavaScript Küçültme, Çirkinleştirme ve Sıkıştırma Arasındaki Fark

JavaScript küçültme, çirkinleştirme veya sıkıştırma, işlevselliklerinde benzerdir. Ancak, farklı amaçları vardır.

JavaScript çirkinleştirme, kodu daha az insan tarafından okunabilir hale getirmek için yeniden yazar. İşlem, kodun okunmasını zorlaştırmak için değişkenleri ve satır içi işlevleri yeniden adlandırırken boşlukları, noktalı virgülleri ve yorumları kaldırır.

JavaScript, kodu otomatik olarak çirkinleştirmek için UglifyJS adlı bir kitaplığa sahiptir. Kodu güvenli ve hırsızlar için daha az çekici hale getirmek için performansı artırır ve okunabilirliği azaltır.

Sıkıştırma, küçültme veya çirkinleştirmeden farklıdır. Kodu ikili bir biçimde yeniden yazmak için GZIP gibi bir sıkıştırma algoritması kullanır, bu da onu çok daha küçük ve daha hızlı yükleme yapar.

Küçültme, boşlukları ve yorumları azaltmak anlamına gelirken, bir kodu tamamen çirkinleştirmek, işlev adlarını, değişken adlarını vb. değiştirerek onu okunamaz bir forma dönüştürür. Ve sıkıştırma, dosya boyutunu küçültmek için kodu ikili olarak yeniden yazar.

Hem küçültme hem de sıkıştırma tersine çevrilebilir, yani kodu orijinal biçimine döndürebilirsiniz, ancak çirkinleştirme geri alınamaz.

JavaScript Kodu Nasıl Küçültülür

JavaScript kodunuzu çeşitli şekillerde küçültebilirsiniz. Bu yöntemlerin her biri diğerlerinden farklı bir yaklaşım benimser.

Büyük JavaScript dosyalarındaki tüm kodları manuel olarak küçültmek neredeyse imkansızdır. JavaScript dosyalarının manuel olarak küçültülmesi, çok zaman alıcı olduğundan yalnızca küçük dosyalar için mümkündür.

Manuel JavaScript küçültme işlemine başlamak için, JavaScript dosyanızı favori metin düzenleyicinizde açar ve tüm boşlukları tek tek manuel olarak silersiniz. JavaScript dosyası için ayarlanmış tüm boşlukların ve yorumların kaldırılması birkaç dakika sürecektir. Bu metin düzenleyicilerden bazıları, süreci önemli ölçüde hızlandırabilecek normal ifadeleri bile destekleyebilir.

Diğer seçenek, bilgisayarınıza küçültme araçlarını yüklemek ve bunları komut satırından kullanmaktır. Küçültmek istediğiniz dosyayı seçmeniz ve hedef dosyayla birlikte komut satırı anahtarına eklemeniz gerekir. Sonra küçültme aracı gerisini hallederdi.

JavaScript'i Manuel Olarak Küçültme: En İyi 5 Araç

Geliştiriciler, kodu küçültmek ve daha iyi performans elde etmek için çeşitli JavaScript küçültme araçlarına güvenir. Ancak, her geliştiricinin kendi tercihi vardır ve farklı bir araç seçer. Hepsi farklı niteliklere sahip çok sayıda JavaScript küçültme aracı var, bu yüzden seçiminizi dikkatli bir şekilde düşünmeniz gerekecek.

Bu araçları herhangi bir sıralamaya veya kategoriye göre listelemiyoruz. Yalnızca en etkili ve popüler JavaScript küçültme araçlarını ekledik.

Web performansınızı artırmanıza yardımcı olabilecek en iyi JavaScript küçültme araçları burada.

1. JSMin

JSMin, JavaScript kodunu küçültmek ve kodu olabildiğince hafif hale getirmek için özel bir komut satırı JavaScript küçültme aracı ve kitaplığıdır. JSMin'i global bir komut dosyası olarak kurmanız yeterlidir; bu, tüm boşlukları ve gereksiz yorumları koddan çok etkili bir şekilde kaldıracaktır. Sonuç olarak, JavaScript dosya boyutunuzu anında yaklaşık %50 oranında azaltabilir.

Bu nedenle, küçültülmüş boyut, hızlı indirmeler için fırsatlar sağlayacaktır. Ayrıca yeni, edebi öz belgeler indirmenin maliyeti olarak daha iletişimsel programlama stilinde bir artış fark edeceksiniz.

Ancak, JSMin'in bir dezavantajı vardır, bu da optimal tasarruf sağlamaz. Basit algoritması nedeniyle, birçok satır besleme karakterini değiştirmeden bırakır. Aksi takdirde, kodda yeni hatalar ortaya çıkarabilir.

2. Microsoft Ajax Küçült

Microsoft Ajax Minifier, hem JavaScript hem de CSS dosyalarının boyutunu küçülterek web uygulamalarınızın performansını artırmanıza olanak tanır. Yorumları, gereksiz boşlukları, noktalı virgülleri, işlevleri ve parantezleri siler.

Yerel değişkenleri kısaltmanın yanı sıra fonksiyon adları, tırnak/çift tırnak, bitişik değişken bildirimlerini birleştirerek yürütülmeyen kodları siler.

AjaxMin ile üretkenliği analiz edebilir ve arka planda JS küçültücüyü şarj edebilirsiniz. Ve küçültmeyi tamamladığında, üretkenlik klasörünü açabilirsiniz.

3. Google Kapatma Derleyicisi

Google Closure Compiler, bir başka mükemmel JavaScript küçültme aracıdır. Hızlı indirme ve daha sorunsuz performans için JavaScript'i formüle eder. Ayrıca sözdizimini ve değiştirilebilir önerileri doğrular, ölü kodu ve türleri kaldırır ve JavaScript'in sakıncaları hakkında sizi bilgilendirir. Bu araç JavaScript'inizi toplar, değerlendirir, gereksiz kodu kaldırır ve yeniden yazar.

Ayrıca, yasadışı JavaScript ve potansiyel olarak tehlikeli işlemler için uyarılar sağlar. Ayrıca, normal JavaScript'ten daha iyi ve küçültülmüş bir JavaScript'e uygun bir derleyicidir.

4. YUI Kompresör

YUI sıkıştırıcı, size diğerlerinden daha yüksek sıkıştırma oranı sağlayan bir komut satırı JavaScript ve CSS küçültme aracıdır. Java ile yazılmış bir küçültme aracıdır ve kaynak JavaScript dosyasını belirtmek için Rhino'ya güvenir.

İlk olarak, YUI, yapısını belirlemek için kaynak JavaScript dosyasını inceler. Ardından belirteç akışını yazdırır. Ardından, mümkün olduğu kadar çok boşluk karakterini kaldırır ve tüm yerel sembolleri 1 (veya 2 veya 3) harfli bir sembolle değiştirir.

YUI Compressor açık kaynaklı olduğu için nasıl çalıştığını öğrenmek için kaynak kodunu inceleyebilirsiniz. Ayrıca YUI, etkili bir sıkıştırma oranına sahip en güvenli JavaScript küçültme aracıdır.

5. UglifyJS

UglifyJS, en popüler JavaScript küçültme araçlarından biridir. JavaScript kodunu ayrıştırabilir, küçültebilir ve sıkıştırabilir. Ayrıca araç, orijinal kodunuza geri dönmek için sıkıştırırken bir kaynak harita dosyası oluşturur.

Ayrıca, aynı anda birden fazla girdi dosyası alabilir, önce girdi dosyalarını ayrıştırır, ardından seçenekleri ayrıştırır.

UglifyJS, giriş dosyalarını sırayla ayrıştırır ve herhangi bir sıkıştırma seçeneğini uygular. Dosyalar aynı global kapsamda ayrıştırılır; bu, bir dosyadan başka bir dosyada bildirilen bir değişkene/işleve yapılan başvurunun uygun şekilde eşleştirileceği anlamına gelir.

JavaScript'i Otomatik Olarak Küçültme: En İyi 5 Çevrimiçi Araç

Kodunuzu çevrimiçi olarak sıkıştırmak için çok sayıda çevrimiçi JavaScript küçültücü vardır. Hemen hemen tüm çevrimiçi JavaScript küçültme araçları benzer bir küçültme sürecini takip eder.

İlk olarak, JavaScript kaynak kodunuzu kopyalayıp yapıştıracaksınız veya kaynak kod dosyasını araca yükleyeceksiniz. Ardından, seçenekler varsa, gereksinime dayalı belirli bir çıktı elde etmek için küçültme aracının ayarlarını optimize edeceksiniz.

Son olarak, bu küçültülmüş dosyayı alacak ve orijinal, genişletilmiş kod yerine web sitesinde kullanacaksınız (ancak her ihtimale karşı orijinal kaynak kod dosyasını koruma altında tutmalısınız).

Web performansınızı zenginleştirmenize yardımcı olabilecek en iyi 5 çevrimiçi JavaScript Küçültme aracını burada bulabilirsiniz. Bu araçları belirli bir sıra veya kategoride listelemesek de, yalnızca en popüler ve etkili JavaScript küçültme çözümlerini dahil ettik.

1. Toptal JavaScript Küçültücü

Toptal JavaScript Minifier, JavaScript'inizi birkaç saniye içinde yoğunlaştırabileceğiniz, verimli ancak basit bir çevrimiçi JavaScript küçültücü sunar. Ayrıca ileride kullanmak üzere kodu bir .js dosyasına dönüştürmenize olanak tanır.

2. JS Sıkıştırma

JSCompress, JavaScript'inizin boyutunu küçültebilir ve %80 oranında azaltabilir. Kodunuzu yapıştırabileceğiniz veya küçültmek için .js dosyanızı yükleyebileceğiniz basit bir tıkla ve kullan arayüzü sunar. Küçültülmüş çıktıyı bir .js dosyası yerine temiz, kopyalanabilir kod olarak alacaksınız. Araç, JavaScript'i küçültmek ve sıkıştırmak için UglifyJS ve Babel-minify'ı kullanıyor.

3. Minifier.org

Minfier.org, kodlarınızı küçültmek için kullanabileceğiniz en basit JavaScript küçültücülerinden biridir. JavaScript kodunu küçültmek için birden çok yöntem kullanır. Araç, JavaScript kodunuzun boyutunu küçültmeden önce ve sonra ağırlıklandırır. Daha sonra küçültme işleminden sonra betiğin kazancını hesaplar ve ekranda görüntüler.

4. TutorialsPoint Online JavaScript Minifier

Bir .js dosyası girebilir, bir URL sağlayabilir veya ham kodunuzu doğrudan TutorialsPoint JavaScript küçültme aracına yapıştırabilirsiniz. Araç, isterseniz doğrudan kodlamak için düzenlenebilir bir alana sahiptir. Ayrıca tek tıkla küçültme seçeneği vardır ve küçültülmüş kodu bir .js dosyası olarak indirebilirsiniz.

5. Paketleyici: Dean Edwards JavaScript Kompresörü

JavaScript kodunuzu sıkıştırmanız gerekiyorsa, Packer by Dean Edwards size en tatmin edici çevrimiçi JavaScript sıkıştırma deneyimlerinden birini sağlayabilir. JavaScript belirteçleri/atomları ve bit ve bayt kalıplarıyla çalışır.

Ayrıca, kodunuzu küçültürken Base62 kodlama ve Shrink değişkenleri seçeneğini uygulamanıza izin verir. JS kodunuzu küçültmek için kopyalayıp JavaScript'e yapıştırın ve paket düğmesine basın. Sizin için otomatik olarak küçültülmüş kod üretecektir.

WordPress'te JavaScript Nasıl Küçültülür: En İyi 5 Araç ve Eklenti

JavaScript küçültme, WordPress'te farklı bir prosedür izler. JavaScript'i küçültmek, ana bilgisayar desteği veya bir WordPress eklentisi yüklemeyi gerektirir. Bir WordPress küçültme eklentisi yükledikten sonra, küçültme işlemini sizin için halledecektir.

Çok sayıda JavaScript küçültme WordPress eklentisi vardır. Bu eklentilerin çoğu, küçültme için aynı prosedürü takip eder ve WordPress panosundan çalıştırılabilir.

WordPress'te JavaScript değişikliği için en etkili araçlardan bazılarını keşfedelim:

1. MyKinsta'da Kod Küçültme

Kinsta müşterisiyseniz, sitenizin JS ve CSS dosyalarını küçültmek için Kod küçültme özelliğimizi kullanabilirsiniz. Tek yapmanız gereken Kinsta CDN'yi etkinleştirmek ve MyKinsta kontrol panelinizde birkaç onay kutusunu işaretlemek. Herhangi bir üçüncü taraf eklenti yüklemeniz gerekmez - dosyalarınız artık simge durumuna küçültülecektir.

Bu küçültme, Cloudflare'nin Kinsta CDN'ye de güç sağlayan uç ağında gerçekleşir. Tüm küçültülmüş dosyalarınız ayrıca Cloudflare ağında önbelleğe alınır ve bu da ek performans avantajlarına dönüşür.

2. W3 Toplam Önbellek

W3 Total Cache, JavaScript, CSS ve HTML'yi ayrıntılı denetimle küçültmenize olanak tanır. Ayrıca, satır içi, gömülü veya herhangi bir üçüncü taraf JavaScript veya CSS kodunu küçültmenize olanak tanır. Ayrıca, küçültmenin yanı sıra daha hızlı sayfa yükleme için JavaScript ve CSS'yi erteler. Ayrıca eklentiler, WordPress web siteleri için birden fazla JavaScript küçültme fırsatı sunar.

3. WP-Optimize Edin

WP-Optimize, önbelleği temizlemenin ve WordPress web sitenizi optimize etmenin yanı sıra CSS ve JavaScript'i küçültmek için gelişmiş bir küçültme aracı sunan bir WordPress optimizasyon eklentisidir. Ayrıca, CSS ve JavaScript'i ertelemenizi sağlar. Sonuç olarak site, ana sayfa yüklendikten sonra kritik olmayan varlıkları yükleyerek sayfa performansını artırır.

4. Otomatik Optimize Et

Autoptimize, sayfa yükleme süresini azaltmak ve web sitenizin performansını artırmak için toplanmayan CSS ve JavaScript'i toplayan, küçülten ve önbelleğe alan bir WordPress küçültme eklentisidir. Komut dosyalarını küçültebilir ve önbelleğe alabilir, kritik JavaScript'i satır içi yapabilir ve toplanmamış JavaScript'i eşzamansız hale getirebilir.

Öncelikle web sitenizin performansına odaklanacak bir WordPress JavaScript küçültme eklentisi arıyorsanız, Autoptimize mükemmel bir seçimdir.

5. Hızlı Hız Küçült

Fast Velocity Minify, WordPress kullanıcıları için gelişmiş JavaScript, CSS ve HTML küçültme sunar. Önbelleğe alınmamış ilk istek gerçekleştiğinde ön uçta küçültmeyi yapar. Ayrıca, eklentinin basit bir kullanıcı arayüzü ve basit bir kullanılabilirliği vardır.

Özet

Web sayfanızdan en üst düzeyde performans elde etmek, küçük ayrıntılara dikkat etmeyi gerektirir. Böylece, HTML, CSS ve JavaScript'i küçültmek, web sitenizin performansı yapılacaklar listesine girer.

JavaScript küçültmede size yardımcı olabilecek çok sayıda araç ve eklenti keşfettik. Ancak bahsedilen her araç veya eklenti aynı amaca hizmet eder ve verimli çalışır.
JavaScript küçültme zor olabilir... ancak bu kılavuz size yardımcı olmak için burada Tweetlemek için Tıklayın
Kullanım durumunuza göre bu listeden bir araç seçin ve daha hızlı web sitesi performansı için JavaScript kodunuzu küçültmeye başlayın.

Beğendiğiniz herhangi bir JavaScript küçültme aracını veya WordPress küçültme eklentisini kaçırdık mı? Yorumlar bölümünde bize bildirin!