Gzip versus minify

Saya memiliki diskusi yang agak hidup beberapa waktu lalu tentang meminimalkan Javascript dan CSS versus seseorang yang lebih suka menggunakan Gzip.

Saya akan memanggil orang ini X.

X mengatakan bahwa Gzip allready mengecilkan kode, karena itu zip file Anda.

Saya tidak setuju. Zip adalah metode lossless menyusut file. Lossless berarti dokumen asli harus dipulihkan dengan sempurna, artinya info harus disimpan untuk dapat mengembalikan spasi, karakter yang tidak diperlukan, kode komentar, dan yang lainnya. Itu membutuhkan lebih banyak ruang, karena lebih banyak harus dikompresi.

Saya tidak memiliki metode pengujian, tetapi saya percaya bahwa Gzip dari kode ini:

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

Akan tetap lebih besar dari Gzip kode ini:

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

Adakah yang bisa membuktikan ini benar atau salah.
Dan tolong jangan datang mengatakan "Itu benar karena itulah yang selalu saya gunakan".

Saya meminta bukti ilmiah di sini.

Sangat mudah untuk diuji. Saya mengambil js Anda, meletakkannya di file yang berbeda dan menjalankan gzip -9 pada mereka. Inilah hasilnya. Ini dilakukan pada mesin WinXP yang menjalankan Cygwin dan gzip 1.3.12.

-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

Berikut ini tes lebih lanjut menggunakan contoh JS dunia nyata. File sumber adalah "common.js" Ukuran file aslinya adalah 73134 byte. Diminimalkan, ia datang ke 26232 byte.

File asli:

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

File yang diperkecil:

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

File asli gzip dengan opsi -9 (versi yang sama seperti di atas):

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

File yang diperkecil gzip dengan opsi -9 (versi yang sama seperti di atas):

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

Seperti yang Anda lihat, ada perbedaan yang pasti antara berbagai metode. Taruhan terbaik adalah minify dan gzip keduanya.

Berikut adalah hasil dari tes yang saya lakukan beberapa waktu lalu, menggunakan file CSS "kehidupan nyata" dari situs web saya. Pengoptimal CSS digunakan untuk minifikasi. Aplikasi arsip Linux standar yang disertakan dengan Ubuntu digunakan untuk Gzipping.

Asli: 28.781 byte.
Minified: 22.242 byte. Gzipped
: 6.969 byte.
Min + Gzip: 5.990 byte.

Pendapat pribadi saya adalah memilih Gzipping terlebih dahulu, karena itu jelas membuat perbedaan terbesar. Adapun minifikasi, itu tergantung pada bagaimana Anda bekerja. Anda harus menyimpan file CSS asli agar dapat mengedit lebih jauh. Jika tidak mengganggu Anda untuk memperkecilnya setelah setiap perubahan, lakukanlah.

(Catatan: ada solusi lain, seperti menjalankannya melalui minifier "sesuai permintaan" saat melayani file, dan menyimpannya di sistem file.)

Berhati-hatilah saat menguji ini: kedua potongan CSS itu sepele kecil, sehingga mereka tidak mendapat manfaat dari kompresi GZIP - penambahan header dan footer kecil GZIP (sekitar 20 byte di atas kepala) saja akan kehilangan keuntungan yang didapat. Pada kenyataannya Anda tidak akan memiliki file CSS sekecil ini dan khawatir untuk mengompresnya.

minify + gzip kompres lebih dari sekedar gzip

Jawaban untuk pertanyaan awal adalah, ya, minify + gzip akan mendapatkan jumlah yang signifikan lebih banyak kompresi daripada hanya gzip. Ini berlaku untuk setiap contoh non-sepele (yaitu kode JS atau CSS yang berguna yang lebih dari beberapa ratus byte).

Untuk contoh ini berlaku, ambil kode sumber Jquery yang tersedia diperkecil dan tidak terkompresi, kompres keduanya dengan gzip dan lihatlah.

Perlu dicatat bahwa Javascript mendapat manfaat lebih banyak dari minifikasi daripada CSS yang dioptimalkan dengan baik, tetapi masih ada manfaatnya.

Pemikiran:

Kompresi GZIP tidak lossless. Ini berarti bahwa ia harus menyimpan semua teks, termasuk spasi putih yang tepat, komentar, nama variabel panjang dan sebagainya, sehingga mereka dapat direproduksi dengan sempurna nanti. Di sisi lain, minifikasi bersifat lossy. Jika Anda mengecilkan kode Anda, Anda menghapus banyak informasi ini dari kode Anda, meninggalkan sedikit yang perlu dipertahankan GZIP.

• Minification membuang spasi putih yang tidak perlu, menyisakan ruang hanya jika diperlukan untuk alasan sintaksis.
• Minifikasi menghapus komentar.
• Minifikasi kode dapat menggantikan nama pengidentifikasi dengan nama yang lebih pendek di mana tidak akan ada efek samping.
• Minifikasi kode dapat membuat 'optimisasi kompiler' sepele ke kode yang hanya mungkin dilakukan dengan benar-benar menguraikan kode
• CSS minification dapat menghilangkan aturan redundan atau menggabungkan aturan yang memiliki pemilih yang sama.

Kamu benar.

Tidak sama untuk memperkecil daripada gzipping (mereka akan disebut sama jika itu yang terjadi). Misalnya, tidak sama dengan gzip ini:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Dari pada minify hingga berakhir dengan sesuatu seperti:

var a = null;

Tentu saja, saya akan mengatakan pendekatan terbaik dalam banyak kasus untuk meminimalkan PERTAMA daripada Gzip, daripada hanya mengecilkan atau gzipping, meskipun tergantung pada kode kadang-kadang hanya mengecilkan atau gzipping akan memberi Anda hasil yang lebih baik daripada melakukan keduanya.

Ada batas di mana encoding gzip menguntungkan. Aturan umum adalah: semakin besar file, semakin baik kompresi dan gzip akan menang. Tentu saja Anda dapat mengecilkan terlebih dahulu kemudian gzip setelahnya.

Tetapi jika kita berbicara tentang gzip vs minify pada selembar kecil teks yang panjangnya tidak lebih dari 100bytes, perbandingan "obyektif" tidak dapat diandalkan, bahkan tidak ada gunanya - kecuali kita mengeluarkan teks dasar untuk menetapkan cara standar pembandingan, seperti tipe Lorem Ipsum tetapi ditulis dalam Javascript atau CSS.

Jadi izinkan saya mengusulkan untuk membuat tolok ukur versi terbaru dari jQuery dan MooTools (versi yang tidak dikompresi) menggunakan kode Fat-Free Minify (PHP) saya (hanya menghapus strip putih spasi dan komentar, tidak ada pemendekan variabel, tanpa pengkodean baseX)

Berikut adalah hasil dari minify vs gzip (pada level-5 kompresi konservatif) vs minify + gzip:

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%)

Sebelum ada yang melompati pistol, ini bukan pertempuran perpustakaan JS.

Seperti yang Anda lihat, minifying + gzipping memberi Anda kompresi yang lebih baik pada file besar . Kode minifying memiliki kelebihan, tetapi faktor utamanya adalah seberapa banyak spasi dan komentar yang ada dalam kode asli. Dalam hal ini, jQuery memiliki lebih banyak sehingga memberikan minifikasi yang lebih baik (lebih banyak spasi putih dalam dokumentasi inline). Kekuatan kompresi Gzip adalah seberapa banyak pengulangan yang ada dalam konten. Jadi ini bukan tentang minify vs. gzip. Mereka melakukan berbagai hal secara berbeda. Dan Anda mendapatkan yang terbaik dari kedua dunia dengan menggunakan keduanya.

Mengapa tidak menggunakan keduanya?

Sangat mudah untuk menguji: cukup masukkan teks css Anda dalam file teks dan kompres file menggunakan pengarsip seperti gzip di linux.

Saya baru saja melakukan ini, dan kebetulan bahwa untuk css pertama, ukurannya adalah 184 byte dan untuk yang kedua 162 byte.

Jadi, Anda benar, ruang putih penting bahkan untuk file yang di-gzip, tetapi seperti yang bisa dilihat dari tes kecil ini, untuk file yang sangat kecil, ukuran file yang dikompresi mungkin lebih besar daripada ukuran file asli.

Ini hanya karena ukuran contoh Anda yang sangat kecil, untuk file yang lebih besar, gzipping akan memberi Anda file yang lebih kecil.

Saya tidak melihat ada yang menyebut Mangling jadi saya memposting hasil saya tentang itu.

Berikut adalah beberapa angka yang saya buat dengan menggunakan UflifyJS untuk minifikasi dan Gzip. Saya memiliki sekitar 20 file yang saya gabungkan bersama sekitar 2,5MB dengan komentar dan semuanya.

File Concat 2.5MB

uglify({
    mangle: false
})

Diminimalkan tanpa mangling: 929kb

uglify({
    mangle: true
})

Diminimalkan dan hancur: 617kb

Sekarang jika saya mengambil file-file itu dan gzip, saya akan mendapatkan 239kb dan 190kb masing-masing.

Ada metode yang sangat sederhana untuk menguji ini: Buat file yang hanya terdiri dari spasi putih dan file lain yang benar-benar kosong. Kemudian Gzip keduanya dan bandingkan ukurannya. File dengan spasi putih di dalamnya tentu saja akan lebih besar.

Tentu saja kompresi lossy "manusia" yang mempertahankan tata letak atau beberapa hal penting lainnya dan menghilangkan sampah yang tidak diperlukan (spasi putih, komentar, hal-hal yang berlebihan, dll.) Akan lebih baik daripada kompresi gZip lossless.

Misalnya, hal-hal seperti tanda atau nama fungsi kemungkinan besar akan memiliki panjang tertentu untuk menggambarkan artinya. Mengganti ini dengan nama satu karakter panjang akan menghemat banyak ruang dan tidak mungkin dengan kompresi lossless.

By the way, untuk CSS ada alat seperti kompresor CSS yang akan melakukan pekerjaan yang merugikan bagi Anda.

Namun, Anda akan mendapatkan hasil terbaik saat menggabungkan "optimasi lossy" dan kompresi lossless.

tentu saja Anda dapat menguji - menulis Anda ke file dan gzip dengan zlib . Anda juga dapat mencoba dengan program utilitas "gzip".

kembali ke pertanyaan Anda - tidak ada hubungan yang pasti antara panjang sumber dan hasil yang dikompresi. titik kuncinya adalah 'entropi' (betapa berbedanya masing-masing elemen dalam sumber).

jadi, itu tergantung pada bagaimana sumber Anda. misalnya, banyak ruang kontinu (ex,> 1000) dapat dikompresi dengan ukuran yang sama dengan beberapa ruang (ex, <10).

ini adalah hasil ketika gzip kedua file

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Anda benar, minify + gzip menghasilkan lebih sedikit byte. Namun tidak ada bukti ilmiah.

Kenapa Anda tidak memiliki metode pengujian?

Perkecil kode Anda dalam satu file, dan biarkan "tidak diubah" pada yang lain. Unggah ke server web yang mampu mencetak keluaran (mod_deflate untuk Apache, misalnya), instal ekstensi Firebug untuk firefox, bersihkan cache Anda dan akses kedua file. Tab "NET" Firebug akan berisi jumlah data yang ditransfer secara tepat, bandingkan dengan itu dan Anda memiliki bukti "empiris".