CSS/JS Küçültücü & Biçimlendirici

Güzelleştirme bunun tersidir: kompakt veya sıkıştırılmış kodu alır ve tutarlı girintiler, tanımlar arası yeni satırlar ve uygun boşluklarla yeniden formatlar. Üçüncü taraf sıkıştırılmış kütüphaneleri hata ayıklarken (sıkıştırılmış kodu kopyalayın, güzelleştirin, sonra okuyun), biçimlendirmesi olmayan üretilen veya birleştirilmiş CSS/JS ile çalışırken, asla düzgün formatlanmamış eski kodları incelerken veya bir kod incelemesi okunabilir farklar (diffs) gerektirdiğinde ihtiyacınız vardır. Yorum eklemez veya orijinal değişken adlarını geri getirmez — sadece biçimlendirme yeniden oluşturulur.

Bu aracın küçültücüsü muhafazakardır — yalnızca hiçbir anlamsal değeri olmayan boşlukları ve yorumları kaldırır. String ifadeleri (tek tırnaklı, çift tırnaklı ve JS'deki template literals), düzenli ifadeler (regex), CSS seçici ve özellik değerleri tamamen korunur. Yaygın bir tuzak: JavaScript kodunuz otomatik noktalı virgül eklemeye (ASI) dayanıyorsa ve kod belirsiz bir şekilde yapılandırılmışsa, birden fazla ifadeyi tek bir satıra koyan küçültme işlemi teorik olarak sorunlara yol açabilir. En güvenli yaklaşım, her zaman açıkça noktalı virgüller kullanmak ve küçültülmüş çıktıyı hedef tarayıcılarınızda test etmektir.

Geliştirme akışı olan üretim projeleri için: küçültmeyi derleme hattınıza (pipeline) entegre eden bir derleme aracı (Webpack, Vite, Rollup, esbuild veya Parcel) kullanın. Bu araçlar daha gelişmiş optimizasyonlar sunar: tree-shaking, modül paketleme, kod parçalama, source maps ve post-processing. Bu çevrimiçi araç şunlar için en iyisidir: bir derleme sistemi olmadan eski dosyaları tek seferlik küçültmek, bir derleme hattı değişikliğine onay vermeden önce sıkıştırılmış boyutu hızlıca kontrol etmek, başkasının sıkıştırılmış kodunu güzelleştirerek okumak veya bir derleme sistemi kurmanın aşırı kaçacağı küçük projeler.

Dosya başına 5MB'a kadar .css veya .js dosyaları yükleyin. Araç, dosya uzantısına göre modu otomatik olarak algılar. Metin girişi (yapıştır mod) için boyut sınırı yoktur ancak çok büyük dosyaların işlenmesi biraz zaman alabilir. Çıktı bir .css veya .js dosyası olarak indirilebilir. SCSS, TypeScript ve diğer ön işlem görmüş formatlar, küçültmeden önce düz CSS veya JavaScript'e derlenmelidir.

Küçültme işlemi, gereksiz karakterleri kaldırarak dosya boyutunu azaltır. Gzip sıkıştırması (web sunucuları tarafından transfer için uygulanır) daha sonra bu küçültülmüş dosyayı daha fazla sıkıştırır. Ana mantık şudur: Küçültülmüş kod, orijinal koda göre daha iyi sıkışır çünkü daha az karakter çeşitliliği vardır. Küçültme + Gzip kombinasyonu genellikle %60-85 toplam azalma sağlar. 100KB'lık bir CSS dosyasını sunmak: orijinal + Gzip ≈ 25KB, küçültülmüş + Gzip ≈ 15KB. Küçültme işlemi Gzip'ten sonra 10KB tasarruf sağlar. Sunucunuzda Gzip yapılandırılmamışsa, küçültme mutlak terimlerde daha fazla tasarruf sağlar ancak göreli kazanç daha küçük olur.

Hayır. Tüm küçültme ve güzelleştirme işlemleri, JavaScript kullanarak tarayıcınızda gerçekleşir. Özel mantık, API uç noktaları veya hassas yapılandırmalar içerebilecek olan CSS ve JavaScript kodunuz cihazınızdan asla ayrılmaz.

Doğrudan değil — araç, farklı sözdizimi kurallarına sahip oldukları için CSS ve JavaScript'i ayrı ayrı işler. Gömülü <style> ve <script> blokları içeren HTML dosyalarınız varsa, her bölümü ayırmanız, ayrı ayrı küçültmeniz ve ardından tekrar yerleştirmeniz gerekir. Tek seferde tam HTML+CSS+JS küçültmesi için gömülü kod bloklarını işleyen bir HTML küçültücüsü kullanın veya tüm varlık türlerini birlikte işleyen bir derleme aracı kullanın.