JS küçültücü

JS küçültücü, JavaScript kodundaki gereksiz karakterleri kaldıran ve küçültme öncesiyle sonrasındaki karakter sayılarını gösteren ücretsiz bir araçtır.

JavaScript küçültme hangi sorunu çözer?

JavaScript küçültme, tarayıcının indirmesi gereken kaynak metin miktarını azaltır. JavaScript söz dizimi açısından gerekli olmayan girintiler, satır sonları ve boşluklar gibi biçimlendirme karakterleri genellikle kaldırılır.

Daha küçük bir betik, özellikle bir site birden fazla büyük paket sunuyorsa aktarım boyutunu ve ayrıştırma yükünü azaltabilir. Brotli veya gzip gibi HTTP sıkıştırma yöntemleri yine de önemlidir, çünkü küçültme ile aktarım sıkıştırması sorunun farklı kısımlarını çözer. Küçültme kaynak koddaki karakterleri kaldırırken sıkıştırma, tekrarlanan verileri aktarım sırasında daha az yer kaplayacak şekilde kodlar.

Bu işlem genellikle dağıtım öncesindeki derleme aşamasında yapılır. Küçültülmemiş bir üçüncü taraf betiğini kontrol ederken, paket boyutlarını karşılaştırırken veya derleme süreci olmayan bir site için bağımsız dosya hazırlarken de işe yarar.

Küçültme işleminin başarılı olması, JavaScript kodunun doğru çalıştığını kanıtlamaz. Bir betik sorunsuz biçimde küçültülse bile hatalı API çağrıları, erişilemeyen değişkenler veya yalnızca çalışma zamanında ortaya çıkan hatalar içerebilir.

JS küçültücü nasıl kullanılır?

JavaScript kodunu JS alanına yapıştırıp aracı çalıştır, ardından Küçültülmüş JS alanında döndürülen değeri kopyala. Özgün kaynak dosyayı sürüm kontrolünde tut ve okunabilir kaynağın yerine yazmak yerine küçültülmüş kopyayı dağıtıma al.

1. Önce kaynak kodda söz dizimi denetimi, linter ve otomatik testleri çalıştır.
2. Dosyaya ait tüm modül içe aktarımları veya sarmalayıcı işlevlerle birlikte betiğin tamamını JS alanına yapıştır.
3. Karakter sayısındaki değişimi görmek için JS karakterleri ve Küçültülmüş JS karakterleri değerlerini incele.
4. Küçültülmüş JavaScript kodunun, üretim dosyasıyla aynı tarayıcıda ve dağıtım ortamında doğru çalıştığını test et.
5. Küçültülmüş ve okunabilir sürümleri birlikte saklayacaksan app.min.js gibi kolayca anlaşılabilen bir dosya adı kullan.

İşlem sunucuda gerçekleştirilir. Girdi HTTPS üzerinden sunucuya gönderilir ve saklanmaz. JavaScript kodunu işleyebilmek için sunucunun yine de bu kodu alması gerekir. Bu nedenle kuruluşunun harici bir hizmete gönderilmesini yasakladığı kaynak kodları yükleme.

Küçültülmüş sonuçta neler bulunur?

Sonuçta küçültülmüş JavaScript kodu ve iki karakter sayısı bulunur. JS karakterleri girdinin uzunluğunu, Küçültülmüş JS karakterleri ise döndürülen Küçültülmüş JS değerinin uzunluğunu gösterir.

Sayımlar, yalnızca bayt sayısını vermek yerine çok baytlı dizenin uzunluğunu ölçen PHP mb_strlen işleviyle yapılır. Bu nedenle karakter sayısı, ağ üzerinden aktarılan son boyutla aynı değildir. UTF-8 karakterleri birden fazla bayt kaplayabilir. Ayrıca gzip veya Brotli, aktarılan dosyanın boyutunu daha da azaltabilir.

Bu araç ayrı bir doğrulama veya tanılama alanı döndürmez. Eksik her parantezi, hatalı biçimlendirilmiş düzenli ifadeyi ya da desteklenmeyen dil özelliğini tespit etmesini bekleme. Özellikle tırnaksız özellik adları veya sondaki virgüller gibi JSON ile ilişkilendirilen hatalar, JavaScript için güvenilir denetimler değildir. Bunun nedeni JavaScript nesne değişmezi söz dizimiyle JSON söz diziminin farklı olmasıdır. JSON verileri için JSON doğrulayıcı & güzelleştiriciyi kullan.

Küçük örnekler ve sorun çıkarabilecek girdiler

Basit bir boşluk değişikliği aşağıdaki gibi gösterilebilir.

Girdi

function add(a, b) { return a + b; }

Küçültülmüş biçim

function add(a,b){return a+b;}

Bir nesnenin çevresindeki biçimlendirme de özellik değerleri değiştirilmeden kaldırılabilir.

Girdi

const settings = { theme: "dark", retries: 2 };

Küçültülmüş biçim

const settings={theme:"dark",retries:2};

Tam biçim, özellikle isteğe bağlı noktalı virgüllerin çevresinde, küçültücüler arasında farklılık gösterebilir. JavaScript kodundaki her boşluğu veya satır sonunu silmek güvenli bir küçültme yöntemi değildir. Güvenli küçültme, biçimlendirme karakterleriyle programın çalışmasını etkileyen karakterleri ayırt etmek için sözcüksel ve söz dizimsel bağlamı dikkate almalıdır.

• Dizelerdeki boşluklar verinin parçasıdır. "Newcastle upon Tyne" içindeki boşluk korunmalıdır.
• Noktalama işaretleri söz diziminin parçası olabilir. a + +b ifadesindeki boşluk kaldırılırsa farklı bir belirteç dizisi ortaya çıkabilir.
• Satır sonları, return, break veya continue sonrasındaki kodlar dahil olmak üzere otomatik noktalı virgül eklemeyi bazen etkiler. İfadenin aynı satırda başlaması gerektiğinden throw ifadesinin hemen ardından satır sonu kullanılamaz.
• Aksanlı ve Latin alfabesi dışındaki karakterler dizelerde ve JavaScript tanımlayıcı kurallarının izin verdiği durumlarda tanımlayıcılarda bulunabilir. Bu karakterlerin bayt boyutu, karakter sayısından farklı olabilir.
• Sayılar kaynak kod belirteçleridir, karakter sayısına ilişkin talimatlar değildir. Küçültücü daha kısa ve eşdeğer bir gösterim seçse bile sayısal anlamı korumalıdır.

JavaScript'i küçültmek hangi durumlarda gereksizdir?

Bir dosya zaten küçültülmüşse işlemi tekrarlamak genellikle anlamlı değildir. İkinci geçiş çok az yer kazandırabilir veya hiç kazandırmayabilir. Ayrıca derleme çıktısının izlenmesini zorlaştırabilir ve mevcut kaynak haritalarına müdahale edebilir.

Yalnızca makinelerin okuyacağı JavaScript kodunu önce okunabilir biçime getirip ardından yeniden küçültmenin de pek anlamı yoktur. Bakım için insan tarafından okunabilen kaynak kodu sakla ve dağıtım çıktılarını bu kaynaktan üret. Yerleşik bir uygulamada esbuild, Rollup veya webpack gibi bir derleme aracı genellikle daha uygundur, çünkü modül paketleme ve kaynak haritası oluşturma işlemlerini otomatikleştirebilir. Küçültme özelliği araca yerleşik olabilir veya yapılandırma ya da eklenti yoluyla eklenebilir. Terser ise bu işe özel bir küçültücüdür.

Küçültmeyi kod gizleme veya erişim kontrolü olarak görme. İşlev ve değişken adları görünür kalabilir, dize değişmezleri okunabilir ve tarayıcı geliştirici araçları küçültülmüş kodu yeniden biçimlendirebilir. Gizli bilgiler, özel anahtarlar ve ayrıcalıklı kimlik bilgileri hiçbir zaman istemci tarafındaki JavaScript koduna yerleştirilmemelidir.

Bir sayfanın tüm statik varlıklarını hazırlıyorsan CSS küçültücü ve HTML küçültücü, ilgili biçimlere karşılık gelen işlemleri uygulayabilir. Ayrıştırma ve boşluk kuralları farklı olduğundan her biçim için kendi aracını kullan.

Sık sorulan sorular

Araç kaynak haritası oluşturuyor mu?

Hayır, ayrı bir kaynak haritası alanı döndürülmez. Üretimdeki yığın izlerinin özgün dosyalardaki konumlarla eşleşmesi gerekiyorsa küçültülmüş betiği ve ona karşılık gelen .map dosyasını aynı derleme sürecinde oluştur. Farklı bir derlemeden alınan kaynak haritasını dağıtıma eklemek, yanıltıcı satır ve sütun referanslarına yol açabilir.

Küçültme, JavaScript kodumun kopyalanmasını engeller mi?

Hayır. Tarayıcıların çalıştırılabilir istemci tarafı kodunu alması gerekir, dolayısıyla bir ziyaretçi kodu indirip inceleyebilir. Küçültme kaynak kodun okunmasını zorlaştırır ancak gizlilik, lisans yaptırımı veya gömülü gizli bilgiler için anlamlı bir koruma sağlamaz.

API anahtarı içeren kodu yapıştırabilir miyim?

Gizli API anahtarlarını, jetonları veya özel kimlik bilgilerini yapıştırmamalısın. Girdi HTTPS üzerinden gönderilir ve saklanmaz, ancak işlem sunucuda gerçekleştirilir. Her ziyaretçiye bilerek dağıtılan genel tarayıcı anahtarlarına da ilgili hizmet destekliyorsa alan adı, kaynak, kota veya izin kısıtlamaları uygulanmalıdır.

Karakter sayısının azalması sayfayı her zaman hızlandırır mı?

Hayır. Etki, özgün dosya boyutuna, önbelleğe alma durumuna, bağlantı koşullarına, sunucu sıkıştırmasına ve tarayıcının ayrıştırıp çalıştırması gereken JavaScript miktarına bağlıdır. Toplam karakter sayısının yanı sıra sıkıştırılmış aktarım boyutunu ve çalışma zamanı davranışını da kontrol et.

Küçültmeden sonra .js uzantısını korumalı mıyım?

Evet. Küçültülmüş JavaScript dosyaları normalde .js uzantısını korur. Her iki sürüm de bulunuyorsa adlandırma kuralı olarak .min.js kullanılır. Dağıtımdan önce sunucunun uygun bir JavaScript içerik türü gönderdiğini ve HTML ya da modül içe aktarımının doğru dosyayı işaret ettiğini doğrula.