Css ve javaScript kodlarını sıkıştıran web araçları
javaScript kütüphaneleri, AJAX, tablosuz tasarım, web standartları v.s. derken css ve javaScript dosyalarımız eskisinden daha fazla kod içerir oldu. Belki css dosyalarındaki kod artışı belirli bir noktaya kadar makul görülebilir fakat javaScript dosyalarındaki kod artışı eskisine oranla çok daha fazla. Sonuç olarak bu artışlar web sayfalarımızın yüklenme sürelerini yükseltiyor. İşte bu olumsuz durumu gidermek amacıyla, css ve javaScript kodlarını sıkıştırarak dosya boyutunu küçülten web araçlarını kullanabiliriz.
Css kodlarını sıkıştıran web araçları
1. CSS Optimizer
2. CSSdrive CSS Compressor
3. Code Beautifier
4. Robson CSS Compressor
5. flumpCakes CSS Optimiser
javaScript kodlarını sıkıştıran web araçları
1. Javascript compressor
2. JS Minifier
3. Compressor
4. /packer/
5. MemTronic’s JavaScript Compressor
Sonuç…
Css kodlarını sıkıştıran web araçlarına CleanCss ve Css Formatter and Optimiser isimli web araçları da dahil edilebilir. Fakat bu iki araç, tanıttığım Code Beautifier aracı ile aynı alt yapıyı kullanıyor (Css Tidy). O nedenle bu üçü arasından tasarımı ve kullanımı daha iyi olanını listeye ekledim. Ayrıca css kodlarını sıkıştıran web araçları arasında karşılaştırmalı bir test yapma gereği de duymadım. Çünkü neredeyse hepsi birbirine yakın oranda sıkıştırma yapıyorlar.
javaScript kodlarını sıkıştıran web araçları arasında ise karşılaştırmalı bir test yapmayı uygun gördüm. Bu test esnasında Prototype 1.6.0.2‘nin kodlarını kullandım. Bu kodlar 130 KB civarındaydı. Bu kodları yukarıda tanıttığım bütün web araçlarında varsayılan ayarlarıyla sıkıştırdım. Sonuçları alttaki tablodan inceleyebilirsiniz 
| Orjinal | Sıkıştırılmış | Kazanç | Adres | |||||
|---|---|---|---|---|---|---|---|---|
| Javascript compressor | 130.345 | 50.636 | 61,1% | URL | ||||
| Compressor | 130.345 | 88.495 | 32,1% | URL | ||||
| /packer/ | 130.345 | 92.799 | 28,8% | URL | ||||
| MemTronic’s JavaScript Compressor | 130.345 | 93.447 | 28,3% | URL | ||||
| JS Minifier | 130.345 | 93.689 | 28,1% | URL | ||||
| Açıklamalar için fareyi tablo başlıklarının üzerinde tutun | ||||||||
Kimi zaman bu tür araçlara ihtiyaç duyabiliyoruz. Bunları bir araya toplaman iyi oldu gerçekten. Teşekkürler Erhan.
bu sıkıştırmanın mantığı nedir?
kodların gereksiz bölümlerini mi siliyor yoksa dosya sistemini mi sıkıştırıyor?
sıkıştırdıktan sonra üzerinde yapılan düzenlemelerde sorun çıkar mı?
ayrıca not defteri ile açtığımızda alt alta nizamlı değil de yanyana sıralanışı neden?
@fatihturan
ben teşekkür ederim.
@sinan
css ve javaScript dosyaları içerisindeki gereksiz boşlukların, sekme aralıklarının ve yorum satırlarının temizlenmesinden bahsediyorum. Not defteri ile açtığında da tek bir satır halinde görünmesinin sebebi budur.
Ayrıca javaScript kodları bazı özel algoritmalarla bu temizleme işlemlerinin yanında şifrelenebiyorlar. Bu şifreleme işlemi sonucunda da hem kodlar küçülüyor hem de pekçok kişiden kodlarınızı korumuş da oluyorsunuz.
güzel bir kaynak olmuş. teşekkürler.
ancak javascript sıkıştırıcılarından hangileri eval() fonksiyonunu kullanıyor onu da ekleseniz daha iyi olur bence.
1. numaradaki “Javascript compressor” ile 4. numaradaki “/packer/” isimli web araçları eval() fonksiyonunu kullanıyorlar.
Çok güzel bir yazı olmuş Erhan abi emeğine sağlık ayrıca ayırdığın zaman için teşekkürler biz de bilgileniyoruz sayende.
Ben daha önce de HTML kodlarını sıkıştıran bir araç kullanmıştım. Güzel sonuçlar ortaya koydu ama o kodları tekrar düzenlemek için açtığınızda içinden çıkılmaz oluyor. Hele ki JS gibi bir ton satırdan oluşabilen betik yazdığımızda içinden çıkılmaz hal alır.
Bunun için sıkıştıracağınız dosyanın yedeğini almak ve yedeğini kaynak kodu olarak kullanmak, değişiklik yapacağımız zaman kaynak kodumuzdan değiştirip sıkıştırdıktan sonra eskisiyle değiştirmek en mantıklısı diye düşünüyorum.
merhaba,
çok iyi bir yazı olmuş Erhan abi teşekkürler. Yalnız birşey sormak istiyorum. Compressor yaptıktan sonra kodlar şifreleniyor sanırım. Bunları çözmek ya da unCompressor yapmak mümkün mü? Gizlilik açısından çok iyi olmuş olur ayrıca. Tekrar teşekkürler.
Javascript Compressor oldukça iyiymiş.
İyiymiş denediğim bir css dosyasını yaklaşık %40 oranında küçülttü. Bazı arkadaşlar bu araçları burada topladığın iyi oldu teşekkür etmiş yazara, benim böyle şeylerden haberim yoktu haberdar ettiğin için teşekkür ederim.
Ne kadar düzenli css yazarmışım bee
css optimizer ile sıkıştırdım sadece yüzde 4 avantaj sağlayabildi.
Eyceks 3KB’dan 2 KB’a indi.
Tanıdığım en kötü css yazıcısına(!) yazdırdığım uzun bi css dosyasını cssoptimizer %75 oranında küçülttü
Bu araçları kulllanmaya yeni başladım, önceleri ek yazılımlar kullanmaktaydım fakat cssoptimizer kadar mantıklı değiller.