JavaScript Küçült _

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

Terser, kodunuzun Soyut Sözdizimi Ağacı üzerinde dört aşamada çalışır. Her aşama bağımsızdır; dolayısıyla herhangi birini diğerlerini bozmadan açıp kapatabilirsiniz.

1. Ayrıştır. Terser, JavaScript'inizi bir AST'ye ayrıştırır. Her sözdizimi hatası, hataya neden olan belirteç ve satırla birlikte burada yüzeye çıkar; böylece herhangi bir dönüşüm çalışmadan önce gerçek sorunu bulursunuz. Ayrıştırıcı, son aşama 4 önerilerine kadar her standart ECMAScript yapısını kabul eder.
2. Sıkıştır. Sıkıştırıcı, AST üzerinde yürür ve anlambilimi koruyan düzinelerce dönüşüm uygular: sabit katlama, ölü dal elimi, kısa saf fonksiyonların satır içine alınması, ardışık var bildirimlerinin katlanması ve eşdeğer ifade biçimlerinin yeniden yazılması (if/else'ten üçlü ifadelere, karşılaştırma zinciri kısaltma, koşullu dönüş katlaması). Her dönüşüm prensipte tersine çevrilebilir; sıkıştırıcı hiçbir zaman gözlemlenebilir davranışı değiştirmez.
3. Düzenle. Düzenleyici, yerel bağlamaları her kapsam içinde en kısa benzersiz tanımlayıcılara (a, b, c, …) yeniden adlandırır. Yalnızca modül sınırından kaçamayan adlar yeniden adlandırılır; böylece dışa aktarılan bağlamalar, özellik anahtarları ve global referanslar değişmeden kalır. Sonuç, herhangi bir aşamanın tek başına sağladığı en büyük bayt tasarrufudur.
4. Oluştur. Terser, dönüştürülmüş AST'yi, boşluklar katlanmış ve ifade ayırıcılar dilbilgisinin kabul ettiği minimuma indirilmiş şekilde bir JavaScript dizesine geri yazdırır. Lisans koruma geçişi /*! … */ bloklarını tutmadıkça yorumlar kaldırılır; çoğu CDN lisansı bunları saklamanızı gerektirir.

JavaScript neden küçültülür?

• Daha hızlı sayfa yüklemeleri. Daha küçük betikler daha hızlı ayrıştırılır ve çalışır. 4G mobil bağlantıda yüzde 40'lık bayt azalması, Time to Interactive'den gerçek saniyeler keser; bu, Google'ın PageSpeed Insights'ın en agresif biçimde ölçtüğü metriktir.
• Daha düşük CDN egress faturaları. CloudFront, Cloudflare ve Fastly gigabayt egress başına fatura keser. Milyonlarca aylık sayfa görüntülemesinde yüzde 40'lık betik azalması, herhangi bir resim veya CSS çalışması gelmeden önce gerçek tasarrufa dönüşür. Matematik, gzip ve brotli sonrasında bile geçerlidir — küçültme, sıkıştırıcının aksi halde kodlamak zorunda kalacağı belirteçleri kaldırır.
• Bu küçültücü sayfanıza vergi yüklemez. Terser, sıkıştırılmamış haliyle yaklaşık 1 MB'tır. Çoğu çevrimiçi küçültücü kütüphanenin tamamını sayfa yüklenirken gönderir; bu da kendi Lighthouse puanlarını düşürür ve kullanıcı bir şey yazmadan önce sayfanın ağır hissettirmesine neden olur. Bu sayfa Terser'i yalnızca Küçüt'e tıkladığınızda veya Canlı modu açtığınızda geç yükler — böylece ilk oluşturma, aracın kendinizin ulaşmanıza yardımcı olmayı vaat ettiği Core Web Vitals eşiklerinin altında kalır.
• Core Web Vitals'ı geçmek. Lighthouse ve PageSpeed Insights, büyük JavaScript'i kötü Total Blocking Time'ın doğrudan bir katkıcısı olarak işaretler. Satıcı kütüphanelerini ve uygulama paketlerini küçültmek, Lighthouse'un "Kullanılmayan JavaScript'i azalt" ve "Yinelenen modülleri kaldır" denetimlerinde en hızlı kazanımdır — genellikle on ya da yirmi puanlık tek seferlik bir azalma.

Yaygın uygulamalar

JavaScript küçültme, modern bir web projesinin neredeyse her aşamasında karşımıza çıkar.

• Taahhüt öncesi kancalar: taahhüt edilen eserin üretime hazır olması ve farkın boşluk karmaşası yerine mantık değişikliklerini göstermesi için bireysel yardımcı program betiklerini repoya taahhüt etmeden önce küçültün.
• Üçüncü taraf widget denetimleri: bir satıcının gömme snippet'ini yapıştırın ve onu milyonlarca kullanıcıya sunmadan önce zaten küçültülmüş olup olmadığını veya daha da küçültülüp küçültülemeyeceğini kontrol edin.
• Eski betik temizliği: mevcut derleme hattınızdan önceki eski jQuery eklentilerini ve elle yazılmış betikleri, kaynak ağacına dokunmadan sıkıştırın.

Uygulamalı bir örnek

Küçük bir fonksiyon alın: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — yorum dahil yaklaşık 130 bayt. İkisi de açıkken Düzenle ve Sıkıştır ile yukarıya yapıştırın. Çıktı yaklaşık function add(n,o){return n+o}console.log(add(1,2)); olacak şekilde kısalır — yaklaşık 55 bayt, yüzde 58 azalma. add fonksiyon adı, console.log çağrısında başvurulduğu için hayatta kalır; firstNumber ve secondNumber parametre adları, fonksiyon gövdesinde yerel oldukları için tek harfe kısalır. Boşlukları katlamaya ve yorumu düşürmeye devam ederken okunabilir parametre adlarını korumak için Düzenle'yi kapatın.

FAQ

Bu tarayıcımda mı çalışıyor?

Evet. Terser, Küçüt'e ilk tıkladığınızda veya Canlı modu etkinleştirdiğinizde geç yüklenir — yaklaşık 200 KB sıkıştırılmış tarayıcı önbelleğinize iner, ardından başka hiçbir şey indirilmez. Kodunuz hiçbir zaman sayfayı terk etmez.

Ad düzenleme nedir ve güvenli midir?

Düzenleme, bayt tasarrufu için yerel değişkenleri tek harflere yeniden adlandırır. Yeniden adlandırmalar kapsamı terk etmediği için kendi kendine yeten betikler ve IIFE paketleri için güvenlidir. Bir sarmalayıcı olmadan adla global değişken ortaya koyan betikler için GÜVENLİ DEĞİLDİR (örneğin window.myLib = …). Emin olmadığınızda Düzenle'yi kapatın.

Küçültmeden sonra kodum neden bozuldu?

Üç olağan şüpheli: dizeyle değişkene başvuran eval veya with; özgün tanımlayıcıya bağlı Function.name veya arguments.callee okumaları; ya da yeniden adlandırılan bir adla ortaya konan global değişkenler. Yeniden adlandırmanın mı yoksa Sıkıştır dönüşümünün mü neden olduğunu yalıtmak için önce Düzenle'yi kapatın.

Modern sözdizimini (ES2020+) destekliyor mu?

Evet. ECMAScript hedefini ES2020 veya Sonraki olarak ayarlayın; Terser isteğe bağlı zincirlemeyi, null birleştirmeyi, üst düzey await'i ve mantıksal atama operatörlerini korur. ES5'e ayarlayın ve Terser mümkün olduğu yerlerde aşağı derler; ancak tam bir transpiler değildir — ES5'in temsil edemediği sözdizimi için Babel kullanın.

Terser ile tarayıcı taraflı JavaScript küçültme, bir derleme aracı eklemeden prodüksiyon kalitesinde çıktı sağlar. Bir betik yapıştırın, ECMAScript hedefini seçin, sonucu kopyalayın veya indirin. Hiçbir şey yüklenmez, hesap yok, derleme hattı yok. Küçültücünün kendisi yalnızca talep ettiğinizde yüklenir — dolayısıyla bu sayfayı açmak size bir megabayt değil, birkaç kilobayt mal olur.