Gzip kontra minify

Oto wyniki testu, który zrobiłem jakiś czas temu, używając" prawdziwego " pliku CSS z mojej strony. optymalizator CSS służy do minifikacji. Standardowa aplikacja Linux archive, która jest dostarczana z Ubuntu, została użyta do Gzippingu.

Oryginał: 28,781 bajty
Minified: 22,242 bajty
Gziped: 6,969 bajty
Min+Gzip: 5,990 bajty

Moim osobistym zdaniem jest to, aby przejść do Gzipping najpierw, ponieważ to oczywiście robi największą różnicę. Jeśli chodzi o minifikację, to zależy od tego, jak pracujesz. Musisz zachować oryginalny plik CSS,aby dokonać zmian dalej w dół linii. Jeśli nie przeszkadza ci minifikacja go po każdej zmianie, To idź na to.

(uwaga: istnieją inne rozwiązania, takie jak uruchamianie go przez minifier "na żądanie" podczas serwowania pliku i buforowanie go w systemie plików.)

Uważaj podczas testowania: te dwa fragmenty CSS są trywialnie małe, więc nie korzystają z kompresji GZIP - dodanie małego nagłówka GZIP straci zyski. W rzeczywistości nie miałbyś tak małego pliku CSS i martwiłbyś się o jego kompresję.

Minify + gzip kompresuje więcej niż tylko gzip

Odpowiedź na pierwotne pytanie brzmi: tak, minify + gzip zyska znacznie większą kompresję niż tylko gzip. To jest prawda dla każdego nietrywialnego przykładu(tj. każdy użyteczny kod JS lub CSS, który ma więcej niż kilkaset bajtów).

Aby uzyskać przykłady tego efektu, Pobierz kod źródłowy Jquery , który jest dostępny zminifikowany i nieskompresowany, skompresuj je za pomocą gzip i spójrz.

Warto zauważyć, że Javascript korzysta o wiele więcej z minifikacji niż dobrze zoptymalizowany CSS, ale nadal jest to korzyść.

Rozumowanie:

Kompresja GZIP jest bezstratna. Oznacza to, że ma aby zapisać cały tekst, w tym dokładne białe znaki, komentarze, długie nazwy zmiennych i tak dalej, aby można było je później idealnie odtworzyć. Z drugiej strony minifikacja jest stratna. Jeśli zminimalizujesz swój kod, usuniesz wiele z tych informacji z kodu, pozostawiając mniej tego, co GZIP musi zachować.

• Minifikacja usuwa niepotrzebne spacje, pozostawiając spacje tylko tam, gdzie jest to konieczne ze względów składniowych.
• Minifikacja usuwa komentarze.
• Kod minifikacja może zastąpić nazwy identyfikatorów nazwami krótszymi, w przypadku gdy nie wystąpią żadne skutki uboczne.
Dzięki temu kod może być optymalizowany przez kompilator, co jest możliwe tylko przez parsowanie kodu.]}
• minifikacja CSS może eliminować zbędne reguły lub łączyć reguły, które mają ten sam selektor.

Masz rację.

To nie to samo minify niż gzipping (nazwaliby się tak samo, gdyby tak było). Na przykład, to nie to samo do gzip to:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Niż minify, aby skończyć z czymś takim:

var a = null;

Oczywiście, powiedziałbym, że najlepszym podejściem w większości przypadków jest najpierw minifying, a następnie Gzip, niż tylko minifying lub gzipping, chociaż w zależności od kodu czasami po prostu minifying lub gzipping daje lepsze wyniki niż robienie obu.

Istnieje próg, przy którym kodowanie gzip jest korzystne. Ogólna zasada jest taka: im większy plik, tym lepsza będzie kompresja i gzip. Oczywiście możesz najpierw minifigurować, a potem gzip.

Ale jeśli mówimy o gzip vs. minify na małym fragmencie tekstu o długości nie większej niż 100bajtów," obiektywne " porównanie jest niewiarygodne , nawet bezcelowe-chyba że wyjdziemy z tekstem bazowym do ustanowienia standardowego sposobu benchmarkingu, jak Lorem Ipsum-type, ale napisany w Javascript lub CSS.

Proponuję więc przetestować najnowsze wersje jQuery i MooTools (nieskompresowane wersje) przy użyciu mojego wolnego od tłuszczu Minify (PHP) kodu (zwykłe usuwanie spacji i komentarzy, bez skracania zmiennych, bez kodowania baseX)

Oto wyniki minify vs. gzip (na poziomie konserwatywnym-kompresja 5) 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%)

Zanim ktoś rzuci Broń, to nie jest bitwa bibliotek JS.

As you widać, minifikacja+gzipping daje lepszą kompresję na dużych plikach. Minifikacja kodu ma swoje zalety, ale głównym czynnikiem jest ilość białych spacji i komentarzy w oryginalnym kodzie. W tym przypadku jQuery ma więcej, więc daje lepszą minifikację (dużo więcej białych spacji w dokumentacji wbudowanej). Siła kompresji Gzip polega na tym, ile powtórzeń jest w treści. Więc nie chodzi o minify vs. gzip. Robią rzeczy inaczej. I dostajesz to, co najlepsze z obu światów za pomocą obu.

Dlaczego nie użyć obu?

Jest to łatwe do przetestowania : wystarczy umieścić tekst css w plikach tekstowych i skompresować pliki za pomocą archiwizatora, takiego jak gzip na Linuksie .

Właśnie to zrobiłem i zdarza się, że dla pierwszego css rozmiar to 184 bajty a dla drugiego 162 bajty.

Więc masz rację, białe spacje mają znaczenie nawet dla plików gzipped, ale jak widać z tego małego testu, dla naprawdę małych plików, Rozmiar skompresowanego pliku może być większy niż rozmiar oryginalnego pliku.

Jest to spowodowane bardzo małym rozmiarem twojego przykładu, w przypadku większych plików, gzipping zapewni Ci mniejsze pliki.

Nie widziałem, żeby ktoś wspominał o Mangling więc zamieszczam moje wyniki na ten temat.

Oto kilka liczb, które wymyśliłem używając UflifyJS do minifikacji i Gzip. Miałem około 20 plików, które połączyłem razem w około 2.5 MB z komentarzami i w ogóle.

Concat Files 2.5 MB

uglify({
    mangle: false
})

Minifigurka bez manglingu: 929kb

uglify({
    mangle: true
})

Minifikowane i zmontowane: 617kb

Teraz jak wezmę te pliki i gzip to dostanę odpowiednio 239kb i 190kb.

Istnieje bardzo prosta metoda testowania tego: utwórz plik składający się tylko z białych znaków i inny plik, który jest naprawdę pusty. Następnie Gzip zarówno i porównać ich rozmiary. Plik z białymi spacjami będzie oczywiście większy.

Oczywiście" ludzka " kompresja stratna, która zachowuje układ lub inne ważne rzeczy i usuwa niepotrzebne śmieci (spacje, komentarze, zbędne rzeczy itp.) będzie lepsza niż bezstratna kompresja gZip.

Na przykład rzeczy takie jak znaki lub nazwy funkcji najprawdopodobniej będą miały określoną długość, aby opisać znaczenie. Zastąpienie go nazwami o długości jednego znaku zaoszczędzi dużo miejsca i nie jest możliwe przy kompresji bezstratnej.

Przy okazji, dla CSS tam są narzędziami takimi jak CSS compressor , które wykonają stratną pracę za Ciebie.

Jednak najlepsze wyniki uzyskasz po połączeniu "optymalizacji stratnej" i kompresji bezstratnej.

Oczywiście możesz przetestować-zapisać swój plik i gzip go za pomocą zlib . Możesz również wypróbować program narzędziowy "gzip".

Wracając do twojego pytania - nie ma określonej zależności między długością źródła a skompresowanym wynikiem. kluczowym punktem jest "Entropia" (jak różne są poszczególne elementy w źródle).

Więc to zależy od tego, jakie jest twoje źródło. na przykład, wiele przestrzeni ciągłych (ex, > 1000) może być skompresowanych tak samo jak kilka (ex,

To są wyniki podczas gzipowania dwóch plików

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Masz rację, minify + gzip daje mniej bajtów. Nie ma jednak dowodów naukowych.

Dlaczego nie masz metody badania?

Minifikacja kodu w jednym pliku i pozostawienie go "niezminifikowanego" na innym. Wgrać na serwer WWW z możliwością gzipowania wyjścia (na przykład mod_deflate dla Apache), zainstalować rozszerzenie Firebug dla Firefoksa, wyczyścić pamięć podręczną i uzyskać dostęp do obu plików. Zakładka "NET" Firebug będzie zawierać dokładną ilość przesyłanych danych, porównaj je i masz " empiryczne" dowód.