Terser ile JavaScript Küçült
Dosya boyutunu küçültüp sitenizi hızlandırmak için JavaScript'i Terser ile tarayıcınızda küçültün.
Kaynağınız cihazınızda kalır
Sonradan silinecek bir şey yok
Tescilli kod için yapıldı
Her modern tarayıcıda çalışır
Nasıl çalışır
- 1
JavaScript’inizi yapıştırın
Yayına girmeden önce küçültmek istediğiniz bir modül, betik ya da parça.
- 2
Sonucu denetleyin
Bir şeyi değiştirmeden önce boyutları karşılaştırın ve uyarıları okuyun.
- 3
Çıktıyı kopyalayın
Bir derleme çıktısına, bir şablona ya da satır içi bir betik etiketine taşıyın.
Neden bu araç
Güvenli yerel yeniden adlandırma
Yalnızca aracın her başvurusunu görebildiği bağlar kısaltılır; çıktının çalışmayı sürdürmesini sağlayan da budur.
Öncesi ve sonrası boyutlar
Ham kazanç, sıkıştırmadan sonra neye dönüştüğünün yanında gösterilir — asıl önemli sayı odur.
Söz dizimi hataları bildirilir
Geçersiz girdi nerede başarısız olduğunu söyler, yüklenme anında kırılan çıktı üretmek yerine.
Yorumlar silinir, yönergeler kalır
Lisans başlıkları ve `"use strict"` sağ kalır, çünkü onları sessizce atmak davranışı değiştirir ya da bir lisansı ihlal eder.
Hiçbir şey yüklenmez
Kod tarayıcınızda işlenir, dolayısıyla tescilli kaynak hiçbir sunucuya ulaşmaz.
Ücretsiz, hesapsız
Kayıt yok, filigran yok, ne kadar küçülteceğinize dair sınır yok.
Kazanç boşluk silmekten değil yeniden adlandırmadan gelir
Boşluk ve yorum sıyırmak görünen ve küçük olan kısımdır. Gerçek bir dosyadaki küçülmenin çoğu kısaltmadan gelir: her yerel değişken, parametre ve işlev adı bir ya da iki karakterle değiştirilir, böylece `calculateTotalPrice` `t` olur ve betimleyici bir kod tabanı çöker. Bütün risk de tam oradadır. Bir küçültücü bir bağı ancak o bağa yapılan her başvuruyu görebildiğinde güvenle yeniden adlandırabilir; bir işlevin içinde kapsamlanmış her şey için bunu görebilir. Bir dizeden yapılmış bir başvuruyu göremez ve kırılan tam da o başvurulardır. Bu tek ayrımı anlamak, karşılaşmanız muhtemel her küçültme hatasını açıklar ve küçültülmüş kod başarısız olup özgün kod çalıştığında nereye bakacağınızı söyler.
Yeniden adlandırılmaması gerekenler ve aracın neden ayırt edemediği
Tehlikeli durumların hepsi aynı biçimi paylaşır: küçültücünün kod olarak okumadığı bir yerde metin olarak yazılmış bir ad. Bir özelliğe `obj["someKey"]` diye erişip başka yerde `obj.someKey` yazmak, bir biçimin yeniden adlandırılıp ötekinin adlandırılmaması demektir. Bir API’den gelen JSON yüküyle eşleşmesi gereken nesne anahtarları aynı sorundur — anahtarı yeniden adlandırın, istek sunucuyla eşleşmeyi bırakır. Daha eski bağımlılık enjeksiyonu çerçeveleri neyi enjekte edeceğine karar vermek için parametre adlarını okur; bir AngularJS uygulamasını açıklama adımı olmadan küçültmenin onu bütünüyle kırmanın ünlü bir yolu olmasının nedeni budur. Çalışma zamanında `Function.name` ya da bir sınıf adını inceleyen her şey — bazı serileştirme ve günlükleme kodları dahil — aynı riske açıktır. Pratik kural: bir sınırı geçen adlar — bir ağ yükü, bir şablon, bir dize araması — tırnaklanmalı ve elleşilmemelidir.
Kaynak haritaları çıktıyı ayıklanabilir kılar ve kaynağınızı sızdırabilir
Küçültülmüş kod, 1. satır 48.000. kolonu gösteren bir yığın izi üretir ki bu işe yaramaz. Kaynak haritası standart çözümdür: çıktıdaki konumları özgün koda geri eşleyen ayrı bir dosya, böylece tarayıcı size yazdığınız kodu gösterir. Onları üretin — alternatif, üretimi kör ayıklamaktır. Planlanmaya değer kısım haritanın nerede durduğudur. Bir kaynak haritası özgün kaynağınızı içerir, genellikle sildiğiniz yorumlarla birlikte; ve paketinizin altındaki bir yorumla gösterilen, herkese açık erişilebilir bir yolda duruyorsa, herkes onu çekip küçültülmemiş kodunuzu okuyabilir. Açık kaynak için sorun değildir, aksi hâlde gerçek bir ifşadır. Alışıldık yanıt, haritaları hata izleme hizmetinize yüklemek ve herkese açık sunmamak ya da onları kimliği doğrulanmış isteklerle sınırlamaktır.
Küçültme gizleme değildir ve hiçbir şeyi korumaz
Açıkça söylemeye değer, çünkü inanç yaygındır: adları kısaltmak mantığı gizlemez. Küçültülmüş kod herhangi bir biçimlendiriciyle tek adımda yeniden girintilenebilir ve adlar gitmiş olsa da yapı, dizeler, API uç noktaları ve algoritma bütünüyle sağlam ve okunurdur. İstemci tarafı kodunuzu anlamak isteyen anlar ve bunu dakikalar içinde yapar. Bu önemlidir, çünkü gerçek hatalara yol açar — küçültmenin onu gizlediği varsayımıyla bir pakete işlenmiş bir API anahtarı ya da istemci tarafında denetlenip erişim denetimi sayılan bir özellik bayrağı. Bir kod ya da değer gizli kalmak zorundaysa, bir tarayıcıya hiç gönderilemez; tek güvenilir sınır sunucunuzdur. Bilinçli gizleyiciler vardır, çabayı bir ölçüde artırırlar, boyut ve hızda ciddi bir bedelle — ve bu sonucu değiştirmezler.
Teldeki sıkıştırma, küçültmeye atfedilenin çoğunu zaten yapar
Küçültmeyi bir bant genişliği kazancı olarak sunmak on yıl geridedir, çünkü artık her şey gzip ya da brotli ile sunuluyor ve bu algoritmalar tam olarak küçültmenin kaldırdığı şeyde son derece iyidir. Yinelenen boşluklar ve uzun yinelenen tanımlayıcılar neredeyse hiçe sıkışır; dolayısıyla küçültülmüş bir dosya ile biçimlendirilmiş bir dosya, sıkıştırmadan sonra çoğu kez öncesine göre çok daha az ayrışır — asıl önemli boyutun sıkıştırılmış olanı olmasının ve bu aracın ikisini de göstermesinin nedeni budur. Küçültme yine de iki başka nedenle yerini hak eder: daha az kaynak, tarayıcının bir şey çalışmadan önce ayrıştırıp derleyeceği daha az şey demektir ki bu mobilde ölçülebilir; ve baytlar sıkıştırmadan önce de küçüktür. Ama paket boyutu için çabayı nereye harcayacağınızı seçiyorsanız, kullanılmayan kodu kaldırmak ad kısaltmayı geniş bir farkla geçer.
Bu tür metinde yerel küçültme neden önemlidir
Bir küçültücünün girdisi kaynak koddur ve kaynak kod, bir şirketin yayımlamayı en az istediği şeydir. Uç nokta adreslerinizi, dahili işlev ve modül adlarınızı, bir geçici çözümün ne için olduğunu açıklayan yorumları, ara sıra orada olmaması gereken bir anahtarı ve tasarımı gerçek çaba istemiş bir sistemin yapısını taşır. Tescilli bir dosyayı barındırılan bir küçültücüye yapıştırmak, yerel olarak da elde edebileceğiniz bir boyut azalması karşılığında bunların tümünü üçüncü bir tarafa gönderir. Bu araç kodu sayfada işler ve hiçbir şey iletmez; bunu geliştirici araçlarının Ağ sekmesinde doğrulayabilirsiniz — ve harfiyen işvereninizin fikrî mülkiyeti olan tek metin türü için makul varsayılan budur.
Kaçınılması gereken yaygın hatalar
- Aynı özellik için `obj.someKey` ile `obj["someKey"]`’i karıştırmak. Bir biçim yeniden adlandırılır, öteki adlandırılmaz; küçültmeden sonra ikisi aynı şeye işaret etmeyi bırakır.
- Bir ağ yüküyle eşleşmesi gereken anahtarları yeniden adlandırmak. Bir API’ye gönderilen ya da ondan alınan nesne anahtarları sunucu tarafından dize olarak eşleştirilir — kısaltıcı elleşmesin diye tırnaklayın.
- Çalışma zamanında parametre ya da işlev adlarına güvenmek. Parametre adıyla bağımlılık enjeksiyonu ve `Function.name` okuyan mantık kırılır, çünkü kısaltmanın değiştirdiği tam o adlardır.
- Kaynak haritalarını herkese açık bir yola yayımlamak. Bir kaynak haritası, silinen yorumlar dahil özgün kodunuzu içerir — paketin yanında sunmak yerine hata izleyicinize yükleyin.
- Küçültmeyi koruma saymak. Küçültülmüş kod tek adımda yeniden girintilenir ve dizeler, uç noktalar ve algoritma hâlâ okunurdur; dolayısıyla gizli hiçbir şey tarayıcıya gönderilemez.
Karşılaştırma
| Ölçüt | Bu araç | Çevrimiçi küçültücüler | Bir derleme hattı |
|---|---|---|---|
| Kaynak sunucuya gönderilir | Asla | Genellikle evet | Hayır |
| Sıkıştırılmış boyut gösterilir | Evet | Nadiren | Bir eklentiyle |
| Kurulum gerekir | Yok | Yok | Yapılandırma |
| Kullanılmayan kodu kaldırır | Hayır | Hayır | Evet |
| Hesap veya kayıt | Gerekmez | Bazen istenir | Gerekmez |
| Fiyat | Ücretsiz | Ücretsiz / ücretli paket | Ücretsiz |
Özellikler
Tanımlayıcı kısaltma
Yerel değişken ve işlev adları kısaltılır; küçülmenin çoğu buradan gelir.
Boşluk ve yorum silme
Ayrıştırıcının yok saydığı her şey atılır, dosyayı okunur kılan satır sonları dahil.
Sıkıştırmaya duyarlı boyutlama
Hem küçültülmüş hem sıkıştırılmış boyut, çünkü kullanıcıya yalnızca ikincisi ulaşır.
Modern söz dizimi desteklenir
Sınıflar, ok işlevleri, şablon dizeleri, isteğe bağlı zincirleme ve modül söz dizimi anlaşılır.
Büyük dosyaları kaldırır
Bütün paketler yükleme ya da boyut sınırı olmadan küçültülür.
Tersine biçimlendirme
Bir güzelleştirme kipi de var, çünkü küçültülmüş üçüncü taraf kodunu okumak yaygın bir ihtiyaçtır.
Kurulum gerekmez
Derleme aracı, çalışma ortamı ya da bağımlılık yok — web sayfasında çalışır.
Arapça ve RTL uyumlu
Sağdan sola Arapça dahil sekiz dilde tam arayüz.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur, içerik izleme ve üçüncü tarafa yükleme yoktur.
Kimler kullanıyor
Ön uç geliştiricileri
Bir derleme adımından geçmeyen bağımsız bir betiği küçültmek.
Web performansı mühendisleri
Kazancın gerçekte nerede olduğunu görmek için küçültülmüş ve sıkıştırılmış boyutları karşılaştırmak.
Üçüncü taraf kodu okuyan geliştiriciler
Küçültülmüş bir kitaplığı izlenebilecek kadar okunur kılmak için güzelleştirme yönünü kullanmak.
Betik gömen herkes
Küçük bir parçayı bir sayfaya gömmek için makul bir boyuta indirmek.
Sıkça Sorulan Sorular
Hayır. Her şey tarayıcınızda yerel çalışır — metniniz asla yüklenmez, saklanmaz veya paylaşılmaz.
Evet — tamamen ücretsiz, hesap ve sınır yok.