Javascript küçültmek için 14 Araçlar

Javascript minification bir tekniktir betiğinizi çok daha küçük bir yer kaplar. İnsanın okunabilirliğini kaybedersiniz ancak kayda değer bir bant genişliği tasarrufu yaparsınız - sonunda, Javascript, kullanıcılarınız için değil, tarayıcınız içindir..

Çoğu üretim web sitesi Javascript minification kullanır, ancak bunun elde edilme şekli büyük ölçüde değişir. Basit çevrimiçi dönüştürücülerden daha kapsamlı GUI araçlarına ve komut satırı arayüzlerine kadar seçeneklerimiz oldukça çeşitlidir. Bu yazıda bir göz atacağız Javascript minification nasıl çalışır?, iş akışımıza nasıl yerleştirebiliriz ve küçültmenin avantaj ve dezavantajları nelerdir?.

Minification nasıl çalışır?

Kodunuzu küçültünce ne olacağını öğrenmenin en iyi yolu UglifyJS Github Repository'ye bir göz atmaktır. Bu komut dosyası, pek çok çevrimiçi dönüştürücünün yanı sıra, GUI araçları ve Grunt gibi komut satırı araçlarında kullanılır. Kodunuzu kısaltmak için uyguladığı dönüşümlerden bazıları:

Gereksiz alanı kaldırır
Değişken isimlerini, genellikle tek karakterlere kısaltır
Ardışık var bildirimlerini birleştirir
Mümkünse dizileri nesnelere dönüştürür
If ifadelerini optimize eder
Basit sabit ifadeleri hesaplar
vb.

Hızlı bir örnek olarak, işte bazı metinleri temelde yazan bir işlev.

 hello işlevi (text) document.write (text);

merhaba ('Makaleye hoş geldiniz');

Bunu küçültünce ne olacağını görelim. Boşlukların ve girintilerin kaldırılmasını ve metin değişkeninin kısaltılmasını not edin.

hello işlevi (e) document.write (e) hello ("Makaleye hoş geldiniz")

Javascript Minification Araçları

Javascript'i küçültmek için kullanılan araçlar genel olarak 3 gruba ayrılabilir: çevrimiçi araçlar, GUI araçları ve komut satırı araçları.

Çevrimiçi araçlarla genellikle kodunuzu yapıştırmanız ve sonuçları hemen kopyalamanız gerekir..
GUI araçları genellikle daha fazla işlev içerir; JS minification onların yaptıklarının sadece küçük bir kısmı.
Komut satırı araçları da genellikle daha kapsamlıdır ve modül olarak minyatürleme sağlar.

Çevrimiçi Araçlar

javascript-minifier.com bir API ile güzel görünümlü bir araçtır
Çevrimiçi YUI Kompresörü, YUI kompresörünü kullanan, birçok seçenek ve CSS minification özelliğine sahip daha güçlü bir araçtır.
jscompress.com bir no-fırfırlar minifier ama işi alır
jsmini.com başka basit ama tamamen kullanışlı bir seçenek

Çevrimiçi araçlar hakkında harika olan şey, onlarla çalışabileceğiniz hızdır. Karmaşık GUI ve komut satırı araçları daha kısa sürede küçültülür, ancak düzgün çalışması için bir proje hazırlamanız gerekir. Bu araçların dezavantajı çoğunlukla çok az veya hiç özelleştirme, en azından komut satırı araçlarına kıyasla.

GUI Araçları

Koala, LESS, SASS derlemesi, JS minification ve daha fazlası için ücretsiz bir araçtır
Prepros, size daha da fazla seçenek sunan çapraz platformlu ücretli bir uygulamadır
Codekit benim tercihim app. Kod derleme, küçültme, önizleme sunucusu, bower paket yönetimi ve çok daha fazlasını sunan ücretli bir Mac uygulamasıdır.
AjaxminGui, JS'nizi küçültmek için ücretsiz, tek amaçlı bir Windows aracıdır
UltraMinifier, OS X için CSS ve JS’yi sürükleyip bırakarak küçümseyen ücretsiz bir uygulama
Küçük, sizin için dosyaları küçülten ve birleştiren bir OS X aracıdır

Burada iki tür GUI uygulamasından bahsettim. Basit bir adımlı minyatür uygulamaları, çevrimiçi emsallerine çok benzer. Dosyaları sürükleyip bırakarak kullanabildiğiniz için kullanımı kolaydır, kurulum gerekmez. Dediler ki onlar neredeyse hiç özelleştirme sağlama.

Daha büyük GUI araçları (Prepros, Koala, Codekit) projeleri yönetmede ve sıkıştırma için size biraz daha seçenek sunmakta harika biraz kurulum gerek. Hızlı bir JS minificationi, 2 saniyelik çevrimiçi veya basit GUI araçlarına kıyasla çok fazla olan kurulumun yaklaşık 20 saniyesini alır..

Diğer taraftan, size genel olarak daha fazla özellik sunar ve size otomasyon sağlar. JS dosyalarınız her kaydettiğinizde küçültülür; manuel olarak küçültülmesine gerek yoktur. Javascript'te bir şey geliştiriyorsanız, kesinlikle gitmenin yolu budur..

Komut Satırı Araçları

Küçült, JS'yi komut satırından küçültmek isteyenler için, ancak Grunt veya Gulp’e fantezi bir şey koymak istemeyenler için
Daha önce bahsettiğimiz Uglify.js, tek başına bir komut satırı aracı olarak da bulunmaktadır.
Grunt, grunt-contrib-uglify adlı Javascript minification uzantısına sahip
Gulp ayrıca gulp-uglify üzerinden Uglify.js kullanarak JS'nin küçültülmüş hali var.

Komut satırı araçları sadece Linux meraklıları için değil! Terminalde harika değilim ama Grunt ve Gulp gibi şeyleri ayarlamak, mükemmel belgeleriyle kolaydır. Komut satırı araçlarının üst kısmı, seçeneklerden çıktıya kadar elde ettiğiniz harika esnekliktir..

Öte yandan, bir bir öğrenme eğrisinin bit. Komut satırına alışmak Kısıtlayıcı bulacağınız bazı (çok değil) alıştırmaları alır. avantajlardan yararlanmaya başlamadan önce.

genel bakış

Web geliştirme konusunda yeniyseniz, ilk üç GUI aracından birini öneririm. Projelerinizi genel olarak yönetmenize yardımcı olacak ve sadece JS küçük onayından çok daha fazlasını sunacaklardır..

Tecrübeli bir profesyonel iseniz, muhtemelen içine bakmak gerekir Homur ya da gulp Bunlar otomasyon görevleri üzerinde en fazla kontrolü sunuyor. Bir komut dosyasını hızlı bir şekilde küçültmeniz gerekirse proje kurmadan, komut satırı araçları size çok zaman kazandırabilir.

Her bir araç grubunun artıları ve eksileri vardır ve gerçekte muhtemelen bir veya diğer birinden birini kullanmanız gerekecektir. Üretim ortamında her zaman Javascript ve CSS'nizi küçültmeniz gerektiğini unutmayın.!