JavaScript Kompresörleri: JS'nizi Nasıl ve Neden Küçültebilirsiniz

JavaScript Kompresörleri: JS'nizi Nasıl ve Neden Küçültebilirsiniz

Hepimiz oradaydık, öğrendin harika bir web sitesi nasıl yapılır , ancak bir kez yayınladığınızda, dayanılmaz derecede yavaştır.





Javascript'inizi küçültmek, web sitesi yanıt sürelerini hızlandırmanın bir yoludur ( HTML'yi sıkıştırma ) ve neyse ki sizin için kolay bir süreç. Bugün size bilmeniz gereken her şeyi göstereceğim.



Minify ne anlama geliyor?

Süreci küçültme (veya küçültme ) basit bir kavramdır. JavaScript'te veya başka bir dilde kod yazdığınızda, yalnızca kodu insanların anlamasını kolaylaştırmak için gereken birçok özellik vardır -- bilgisayarlar, değişkenlerinize ne dediğiniz veya parantezler arasında ne kadar boşluk olduğu ile ilgilenmez. Örneğin.





Kodu küçülterek, dosya boyutunu büyük ölçüde azaltabilirsiniz. Bu nedenle daha küçük bir dosya, kullanıcılarınızın indirmesi için daha hızlı olacaktır. Yalnızca bir veya iki satır JavaScript yazıyorsanız, muhtemelen gözle görülür bir gelişme olmayacaktır. Ancak, çok fazla kod yazıyorsanız veya jQuery gibi büyük kitaplıklar kullanıyorsanız, gözle görülür performans artışları ve önemli ölçüde küçültülmüş dosya boyutları kolayca elde edilebilir!

Harici bir CDN'den kod yüklerseniz, örneğin Google Tarafından Barındırılan Kitaplıklar , küçültülmüş kod kullandınız.



disney plus yardım merkezi kodu 83

Küçültülmüş Kod Neye benziyor?

Bazı örneklere bakalım. Küçük kod tabanlarında küçültmenin etkisini görmek zor, bu yüzden uzun uzunlukları için şimdiden özür dilerim.

İşte bazıları küçültülmemiş JSON'u Python ve JavaScript ile kullanma kılavuzumuzdan JavaScript:



// setup some JSON to use
var cars = [
{ 'make':'Porsche', 'model':'911S' },
{ 'make':'Mercedes-Benz', 'model':'220SE' },
{ 'make':'Jaguar','model': 'Mark VII' }
];
window.onload = function() {
// setup the button click
document.getElementById('theButton').onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post('receiver', cars, function(){
});
// stop link reloading the page
event.preventDefault();
}

İşte küçültülmüş kod:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Kodun bu küçültülmüş versiyonu yüzde 39 daha küçük. Bu örnekte, değişken adları aynı kalır, ancak tüm boşluklar ve yorumlar kaldırılmıştır.



İşte jQuery kılavuzumuzdan başka bir örnek:

// dfd == deferred
var dfd = $.Deferred();
function doThing() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, it is finished');
});

İşte küçültülmüş kod:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

Bu sefer sadece bir yüzde 26 azaltma -- bu kadar küçük bir kod bloğu için hala çok iyi.

Javascript ve DOM kılavuzumuzdan son bir örnek:

//declare a new variable to hold a new h1 element
var newHeading = document.createElement('h1');
//add the text node to the document
var h1Text = document.createTextNode('Heading Level 1');
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as 'bt'
document.getElementById('bt').appendChild(newHeading);

nasıl olduğuna dikkat edin çok fazla yorum ve boşluk. Küçültülmüş sürüm dosya boyutunu azalttı yüzde 52 :

roku'dan nasıl çıkış yapılır
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Aşağıda, küçültülmüş sürümleriyle karşılaştırıldığında bazı yaygın JavaScript Kitaplıklarının boyutları verilmiştir:

  1. Yüksek çizelgeler: 1 MB > 201 KB
  2. jQuery: 270 KB > 90 KB
  3. MooAraçları: 164 KB > 93 KB

Bu kitaplıklardan bazıları sıkıştırıldığında önemli ölçüde boyut küçültme gösterir ( ~ yüzde 80 ), diğerleri pek iyi olmasa da ( ~ yüzde 40 ). Bununla birlikte, herhangi bir tasarruf, web sitenizi kullanıcılarınız için daha hızlı hale getirecek ve web sunucunuzdaki yükü azaltacaktır.

Nasıl Küçültebilirsiniz?

Artık nasıl çalıştığını ve neye benzediğini biliyorsunuz, hadi nasıl yapılacağına geçelim. Endişelenmeyin, kodunuzu manuel olarak değiştirmenize hiç gerek yok! Süreci sizin için idare eden ücretsiz olarak kullanılabilen çeşitli araçlar vardır.

Bunlar birkaç şekilde çalışır. Çoğu çevrimiçi araç, kodu kopyalayıp yapıştırmanıza izin verir; bu, daha sonra işleyecek ve sayfada size geri dönecektir. Bu araçlar genellikle birden fazla dosya yüklemenize de izin verir.

İşte çevrimiçi araçların kısa bir özeti. Çoğunlukla aynı şekilde çalışırlar, bu nedenle hangisini seçeceğiniz konusunda çok fazla endişelenmenize gerek yoktur.

JSCompress -- Ben şahsen bu web sitesini en çok, sadece hızlı bir işse kullanıyorum. Çalıştırması hızlıdır ve size onu oluşturmak için kullandıkları araçları bile gösterirler.

JavaScript Küçültücü -- Bu araç iyi çalışıyor, ancak bir API olarak gerçekten parlıyor . Bu, mevcut web sitelerinin üzerine kendi entegrasyonunuzu veya hizmetinizi oluşturmanıza olanak tanır.

JavaScript Minifier -- Aynı ada sahip başka bir web sitesi, bu araç geldikleri kadar basit. Seçenek veya menü yok, sadece bir düğme.

küçült -- Bu web sitesi harika görünüyor ve geliştiriciler buradaki ayrıntılara açıkça dikkat ettiler.

Bu liste sonsuza kadar devam edebilir. Web sitelerini küçültmek için o kadar çok çevrimiçi araç var ki yanlış gitmesi zor.

Küçültme araçları, sizin için komut satırı araçları veya eklentiler olarak da mevcuttur. JavaScript düzenleyici . Bu araçların kullanımı genellikle çok daha hızlıdır ve mevcut kodunuzla 'sadece çalışır'. Kopyalamaya ve yapıştırmaya gerek yoktur ve JavaScript'inizi aynı dosyada olabilecek herhangi bir HTML veya CSS'den çıkarmanız gerekmez.

Microsoft Visual Studio kullanıyorsanız, Paketleyici ve Küçültücü pazar yerinden uzantı 600.000'den fazla yüklemeye sahip! Sadece bu değil, düzenli olarak güncellenir ve GitHub'da mevcut .

eğer hayranıysanız Yüce metin benim gibi, o zaman küçült istediğiniz pakettir. 61.000'in üzerinde kurulumla çok popüler bir pakettir ve aynı zamanda GitHub'da mevcut , bir açık kaynak projesine katkıda bulunmak isterseniz .

Son olarak, eğer bir PyCharm kullanıcı, yapabilirsin entegre etmek için yapılandırın gibi birçok yaygın sıkıştırma aracıyla doğrudan YUI kompresörü . Bu araçların çoğu, yukarıda listelenen çevrimiçi araçlara doğrudan güç sağlar.

uyarılar

Orası vardır yakalamak doğru mu? Hiçbir şey asla mükemmel olamaz. Evet, bir sorun var, ancak oldukça küçük ve kolayca çözülebilir:

Küçültülmüş kod orijinal durumuna geri yüklenemez.

Herhangi bir kodu küçülttüğünüzde, orijinal formu kaybolur. Kolayca büyük değişiklikler yapma umudunuz varsa, bunun bir kopyasını saklamanız gerekir - sürüm kontrolünü kullanmak yeterli değildir.

yapmak mümkün iken küçültmek kodunuz, bir daha asla aynı olmaz. Bir kere tüm değerli yorumlarınız kayboluyor.

Bu çok büyük bir sorun değil, ancak kodlama yaparken bunu aklınızda tutmanız gerekiyor. Temel bir kural olarak, sıkıştırılmamış > geliştirmek ve sıkıştırılmış > üretim.

Artık JavaScript'i küçültmek hakkında bilmeniz gereken her şeyi biliyorsunuz! Kodu küçültmek, bir sunucudan performansı sıkıştırmanın yollarından biridir ve tüm büyük web siteleri bunu yapıyor.

Kodunuzu küçültmek için hangi araçları kullanıyorsunuz? Hatta rahatsız ediyor musun? Aşağıdaki yorumlarda bize bildirin!

facebook oyun istekleri nasıl engellenir

İmaj Kredisi: Shutterstock üzerinden NavinTar

Paylaş Paylaş Cıvıldamak E-posta Disk Alanını Boşaltmak için Bu Windows Dosyalarını ve Klasörlerini Silin

Windows bilgisayarınızdaki disk alanını temizlemeniz mi gerekiyor? İşte disk alanını boşaltmak için güvenle silinebilecek Windows dosya ve klasörleri.

Sonrakini Oku İlgili konular
  • Programlama
  • JavaScript
  • Java
  • Web Tasarım
Yazar hakkında Joe Coburn(136 Makale Yayınlandı)

Joe, İngiltere'deki Lincoln Üniversitesi'nden Bilgisayar Bilimleri mezunudur. Profesyonel bir yazılım geliştiricisi ve drone uçurmadığı veya müzik yazmadığı zamanlarda, genellikle fotoğraf çekerken veya video çekerken bulunabilir.

Joe Coburn'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın