Gzip ve küçültme

Geçen gün, Gzip kullanmayı tercih eden birine karşı Javascript ve CSS'nin küçültülmesi hakkında biraz canlı bir tartışma yaptım.

Bu kişiye X diyeceğim.

X, Gzip'in dosyalarınızı sıkıştırdığı için kodu zaten küçülttüğünü söyledi.

Katılmıyorum. Zip, dosya boyutunu küçültmenin kayıpsız bir yöntemidir. Kayıpsız, orijinalin mükemmel bir şekilde geri yüklenmesi gerektiği anlamına gelir, yani boşlukları, ihtiyaç duyulmayan karakterleri, yorumlanmış kodu ve diğer her şeyi geri yükleyebilmek için bilgilerin depolanması gerekir. Daha fazla sıkıştırılması gerektiğinden, bu daha fazla yer kaplar.

Test etme yöntemim yok, ancak bu kodun Gzip'inin:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

Yine de bu kodun Gzip'inden daha büyük olacaktır:

.a1{body:background-color:#FFF;padding:40px}

Bunu doğru ya da yanlış kanıtlayabilecek kimse var mı?
Ve lütfen gelip "Doğru çünkü her zaman kullandığım buydu" demeyin.

Burada bilimsel kanıt istiyorum.

Test etmesi çok basit. J'lerinizi aldım, onları farklı dosyalara koydum ve üzerlerinde gzip -9 çalıştırdım. İşte sonuç. Bu, Cygwin ve gzip 1.3.12 çalıştıran bir WinXP makinesinde yapıldı.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

İşte gerçek bir JS örneği kullanan başka bir test. Kaynak dosya "common.js" dir. Orijinal dosya boyutu 73134 bayttır. Küçültülmüş, 26232 bayta geldi.

Orijinal dosya:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

Küçültülmüş dosya:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

-9 seçeneğiyle gziplenmiş orijinal dosya (yukarıdaki ile aynı sürüm):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

-9 seçeneğiyle sıkıştırılmış küçültülmüş dosya (yukarıdakiyle aynı sürüm):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

Gördüğünüz gibi, çeşitli yöntemler arasında kesin bir fark vardır. En iyi bahis, hem küçültmek hem de gzip yapmaktır.

İşte bir süre önce, web sitemdeki "gerçek hayattaki" bir CSS dosyasını kullanarak yaptığım bir testin sonuçları. CSS Optimize EdiciKüçültme için kullanılır. Ubuntu ile birlikte gelen standart Linux arşiv uygulaması Gzipping için kullanıldı.

Orijinal: 28.781 bayt
Küçültülmüş: 22.242 bayt Gzip'lenmiş
: 6.969 bayt
Min + Gzip: 5.990 bayt

Kişisel görüşüm, en büyük farkı yarattığı için önce Gzipping'e gitmek. Küçültmeye gelince, nasıl çalıştığına bağlı. Daha ileride düzenlemeler yapmak için orijinal CSS dosyasını saklamanız gerekir. Her değişiklikten sonra onu küçültmek sizi rahatsız etmiyorsa, onun için gidin.

(Not: Dosyayı sunarken "isteğe bağlı" minifier aracılığıyla çalıştırmak ve dosya sisteminde önbelleğe almak gibi başka çözümler de vardır.)

Bunu test ederken dikkatli olun: bu iki CSS parçacığı önemsiz derecede küçüktür, bu nedenle GZIP sıkıştırmasından faydalanmazlar - GZIP'in küçük üstbilgi ve altbilgisinin (yaklaşık 20 bayt ek yük) tek başına eklenmesi, elde edilen kazançları kaybedecektir. Gerçekte bu kadar küçük bir CSS dosyanız olmaz ve onu sıkıştırmakla ilgilenmezsiniz.

minify + gzip, gzip'ten daha fazlasını sıkıştırır

Orijinal sorunun cevabı, evet, minify + gzip, gzip'ten önemli miktarda daha fazla sıkıştırma kazanacaktır. Bu, önemsiz olmayan herhangi bir örnek için geçerlidir (yani, birkaç yüz bayttan fazla olan herhangi bir kullanışlı JS veya CSS kodu).

Bunun fiili örnekleri için, küçültülmüş ve sıkıştırılmamış olarak bulunan Jquery kaynak kodunu alın , her ikisini de gzip ile sıkıştırın ve bir göz atın.

Javascript'in küçültmeden iyi optimize edilmiş CSS'den çok daha fazla faydalandığını belirtmek gerekir, ancak yine de bir faydası vardır.

Akıl Yürütme:

GZIP sıkıştırması kayıpsızdır. Bu, daha sonra mükemmel bir şekilde yeniden üretilebilmeleri için tam boşluk, yorumlar, uzun değişken adları vb. Dahil olmak üzere tüm metni depolaması gerektiği anlamına gelir. Öte yandan, küçültme kayıptır. Kodunuzu küçültürseniz, bu bilgilerin çoğunu kodunuzdan kaldırmış olursunuz ve GZIP'nin koruması gereken daha azını bırakırsınız.

• Küçültme, gereksiz yere boşlukları atar ve yalnızca sözdizimsel nedenlerle gerekli yerlerde boşluk bırakır.
• Küçültme yorumları kaldırır.
• Kod küçültme, hiçbir yan etkinin olmayacağı durumlarda tanımlayıcı adlarını daha kısa adlarla değiştirebilir.
• Kod küçültme, yalnızca kodu gerçekten ayrıştırarak mümkün olan koda önemsiz 'derleyici iyileştirmeleri' yapabilir.
• CSS küçültme, gereksiz kuralları ortadan kaldırabilir veya aynı seçiciye sahip kuralları birleştirebilir.

Haklısın.

Küçültmek gzip ile aynı şey değildir (eğer durum buysa aynı şekilde adlandırılırlardı). Örneğin, bunu gzip ile sıkıştırmak aynı değildir:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Şunun gibi bir şey elde etmek için küçültmekten çok:

var a = null;

Tabii ki, çoğu durumda sadece küçültme veya gzip'den ziyade İLK sonra Gzip'i küçültmek için en iyi yaklaşımı söyleyebilirim, ancak koda bağlı olarak bazen sadece küçültmek veya gzip yapmak her ikisini birden yapmaktan daha iyi sonuçlar verecektir.

Gzip kodlamanın avantajlı olduğu bir eşik vardır. Genel kural şudur: dosya ne kadar büyükse, sıkıştırma ve gzip o kadar iyi eller aşağı kazanır. Elbette önce küçült, sonra gzip'i küçültebilirsiniz.

Ancak, 100 bayttan daha uzun olmayan küçük bir metin parçasında gzip ile küçültmeden bahsediyorsak, "nesnel" bir karşılaştırma güvenilmez, hatta anlamsızdır - standart bir kıyaslama yöntemi oluşturmak için temel bir metin bulmadıkça, Lorem Ipsum türü gibi ancak Javascript veya CSS ile yazılmıştır.

O halde, Fat-Free Minify'ımı kullanarak jQuery ve MooTools'un (sıkıştırılmamış sürümler) en son sürümlerini karşılaştırmayı teklif etmeme izin verin. (PHP) kodumu (sadece boşlukları ve yorumları düz bir şekilde sıyırma, değişkenlerin kısaltılması yok, baseX kodlaması yok)

Minify ve gzip (konservatif düzey-5 sıkıştırmada) ile minify + gzip karşılaştırmasının sonuçları şunlardır:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

Biri silahı atlamadan önce, bu bir JS kütüphaneleri savaşı değil.

Gördüğünüz gibi küçültme + gzip, size büyük dosyalar üzerinde daha iyi sıkıştırma sağlar . Kodu küçültmenin avantajları vardır, ancak asıl faktör orijinal kodda ne kadar boşluk ve yorum bulunduğudur. Bu durumda, jQuery daha fazlasına sahiptir, bu nedenle daha iyi küçültme sağlar (satır içi belgelerde çok daha fazla boşluk). Gzip sıkıştırmasının gücü, içerikte ne kadar tekrar olduğu ile ilgilidir. Yani mesele küçültme ile gzip arasında değil. İşleri farklı yapıyorlar. Ve her ikisini de kullanarak her iki dünyanın en iyisini elde edersiniz.

Neden ikisini birden kullanmıyorsunuz?

Test etmesi kolaydır: css'inizin metnini metin dosyalarına koyun ve Linux'ta gzip gibi bir arşivleyici kullanarak dosyaları sıkıştırın.

Bunu şimdi yaptım ve ilk css için boyut 184 bayt ve ikincisi 162 bayt.

Yani, haklısınız, beyaz boşluk gzip'lenmiş dosyalar için bile önemlidir, ancak bu küçük testten de görebileceğiniz gibi, gerçekten küçük dosyalar için, sıkıştırılmış dosyanın boyutu orijinal dosyanın boyutundan daha büyük olabilir.

Bunun nedeni, örneğinizin çok küçük boyutudur, daha büyük dosyalar için gzip işlemi size daha küçük dosyalar sağlayacaktır.

Kimsenin Mangling'den bahsettiğini görmedim, bu yüzden sonuçlarımı bunun üzerine gönderiyorum.

İşte küçültme ve Gzip için UflifyJS kullanarak bulduğum bazı rakamlar. Yaklaşık 2.5MB boyutunda yorumlarla birlikte birleştirdiğim yaklaşık 20 dosyam vardı.

Concat Dosyaları 2.5MB

uglify({
    mangle: false
})

Ezilmeden küçültülmüş: 929 kb

uglify({
    mangle: true
})

Küçültülmüş ve ezilmiş: 617 kb

Şimdi bu dosyaları alıp gzip edersem, sırasıyla 239kb ve 190kb alacağım.

Bunu test etmenin çok basit bir yöntemi var: Yalnızca boşluktan ve gerçekten boş olan başka bir dosyadan oluşan bir dosya oluşturun. Sonra her ikisini de Gzipleyin ve boyutlarını karşılaştırın. İçinde boşluk olan dosya elbette daha büyük olacaktır.

Elbette düzeni veya diğer bazı önemli şeyleri koruyan ve gerekli olmayan gereksiz dosyaları (beyaz boşluklar, yorumlar, gereksiz şeyler vb.) Kaldıran "insan" kayıplı sıkıştırma, kayıpsız bir gZip sıkıştırmasından daha iyi olacaktır.

Örneğin, işaretler veya işlev adları gibi şeyler, anlamı açıklamak için büyük olasılıkla belirli bir uzunlukta olacaktır. Bunu bir karakter uzunluğundaki adlarla değiştirmek çok fazla alan kazandırır ve kayıpsız sıkıştırma ile mümkün değildir.

Bu arada, CSS için kayıplı işi sizin için yapacak CSS sıkıştırıcı gibi araçlar var.

Ancak, "kayıplı optimizasyon" ve kayıpsız sıkıştırmayı birleştirdiğinizde en iyi sonuçları alırsınız.

tabii ki test edebilirsiniz - bir dosyaya yazıp zlib ile gzip edebilirsiniz . Ayrıca "gzip" yardımcı programını da deneyebilirsiniz.

sorunuza geri dönün - kaynağın uzunluğu ile sıkıştırılmış sonuç arasında kesin bir ilişki yoktur. kilit nokta 'entropi'dir (kaynaktaki her bir unsur ne kadar farklıdır).

bu, kaynağınızın nasıl olduğuna bağlıdır. örneğin, çok sayıda sürekli boşluk (ör.> 1000), birkaç boşlukla aynı boyutta (ör. <10) sıkıştırılabilir.

bu, iki dosyayı gzip'lemenin sonuçlarıdır

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Haklısınız, küçültmek + gzip daha az baytla sonuçlanır. Yine de bilimsel kanıt yok.

Nasıl oluyor da test etme yönteminiz yok?

Kodunuzu bir dosyada küçültün ve başka bir dosyada "küçültülmemiş" bırakın. Çıktıyı gzipleyebilen bir web sunucusuna yükleyin (örneğin Apache için mod_deflate), firefox için Firebug uzantısını yükleyin, önbelleğinizi temizleyin ve her iki dosyaya da erişin. Firebug'ın "NET" sekmesi, aktarılan verilerin tam miktarını içerecek, bunları karşılaştıracak ve "deneysel" kanıtınız olacak.