Gzip vs minify
https://stackoverflow.com/questions/807119
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tinha um pouco animada discussão no outro dia sobre minifying Javascript e CSS contra alguém que prefere usando Gzip.
Vou chamar essa pessoa X.
X disse que Gzip Allready minifies o código, uma vez que fecha seus arquivos.
Eu discordo. Zip é um lossless método de diminuir o tamanho do arquivo. meios Lossless o original deve ser restaurados perfeitamente, ou seja, informações devem ser armazenadas para ser capaz de restaurar os espaços, os caracteres necessários-un, código comentado e tudo mais. Que ocupa mais espaço, uma vez que mais deve ser comprimido.
Eu não tenho nenhum método de teste, mas acredito que o Gzip deste código:
.a1 {
background-color:#FFFFFF;
padding: 40px 40px 40px 40px;
}
ainda será maior do que o Gzip deste código:
.a1{body:background-color:#FFF;padding:40px}
Há alguém que pode provar isso certo ou errado.
E por favor não vêm dizendo "É certo, porque é isso que eu sempre usei".
Eu estou pedindo a prova científica aqui.
Solução
Muito simples de teste. Tomei seus js, colocá-los em diferentes arquivos e gzip correu -9 sobre eles. Aqui está o resultado. Isso foi feito em uma máquina WinXP correr Cygwin e 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
Aqui está mais um teste usando um JS exemplo do mundo real. O arquivo de origem é "Common.js" O tamanho do arquivo original é 73134 bytes. Minified, se tratava de 26232 bytes.
arquivo original:
-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js
arquivos minified:
-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js
arquivo original compactado com -9 opção (mesma versão como acima):
-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz
arquivos minified compactado com -9 opção (mesma versão como acima):
-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 5608 Apr 30 10:39 common-min.js.gz
Como você pode ver, há uma clara diferença entre os vários métodos. A melhor aposta é tanto apoucar, bem como gzip-los.
Outras dicas
Aqui estão os resultados de um teste que fiz uma volta, enquanto, usando um arquivo CSS "vida real" do meu site. CSS Optimiser é usado para minification. O aplicativo de arquivo Linux padrão que vem com o Ubuntu foi usado para gzipping.
Original: 28781 bytes
Minified: 22242 bytes
Gzipped: 6969 bytes
Min + Gzip: 5990 bytes
A minha opinião pessoal é ir para gzipping primeiro, uma vez que, obviamente, faz a maior diferença. Quanto minification, isso depende de como você trabalha. Você teria que manter o arquivo CSS de origem para fazer edições mais abaixo da linha. Se ele não incomodá-lo para apoucar-lo após cada mudança, em seguida, ir para ele.
. (Nota: existem outras soluções, como executá-lo através de um minifier "on-demand" ao servir o arquivo e cache-lo no sistema de arquivos)
Cuidado ao testar isso: esses dois trechos de CSS são trivialmente pequeno, para que eles não se beneficiam de compressão GZIP - a adição de pequena cabeçada de GZIP só vai perder os ganhos obtidos. Na realidade, você não teria um arquivo CSS este pequeno e se preocupar com comprimi-lo.
minify + gzip compressas mais do que apenas gzip
A resposta à pergunta inicial é, sim, minify + gzip vai ganhar uma quantidade significativa mais compressão do que apenas gzip. Isto é verdadeiro para qualquer exemplo não trivial (ou seja, qualquer código JS ou CSS útil que é mais do que algumas centenas de bytes).
Para exemplos deste em vigor, grab Jquery código-fonte que está disponível minified e descompactado, compressa ambos com gzip e dar uma olhada.
É importante notar que o Javascript beneficia muito mais de minification de CSS bem otimizado, mas ainda há um benefício.
Raciocínio:
compressão GZIP é sem perdas. Isso significa que ele tem para armazenar todo o texto, incluindo o espaço em branco exato, comentários, nomes longos variáveis ??e assim por diante, para que eles possam ser perfeitamente reproduzida mais tarde. Por outro lado, minification é com perdas. Se você apoucar o seu código, você está removendo grande parte desta informação do seu código, deixando menos que GZIP precisa preservar.
- Minification descarta espaços desnecessariamente, deixando espaços apenas quando necessário por razões sintáticas.
- Minification remove comentários.
- Código minification pode substituir identificador nomes com nomes mais curtos onde não haveria efeitos colaterais.
- Código minification podem tornar triviais 'otimizações do compilador' para o código que só são possíveis por realmente analisar o código
- CSS minification pode eliminar regras redundantes ou combinar regras que têm o mesmo selector.
Você está certo.
Não é o mesmo para apoucar que gzipping (que seria chamado do mesmo se fosse esse o caso). Por exemplo, não é o mesmo para gzip isto:
var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;
Do que minify acabar com algo como:
var a = null;
É claro, eu diria que a melhor abordagem na maioria dos casos para apoucar primeiro e depois Gzip, que apenas minifying ou gzipping, embora dependendo do código às vezes apenas minifying ou gzipping lhe dará melhores resultados do que fazer as duas coisas.
Há um limite no qual gzip-encoding é vantajoso. A regra geral é: quanto maior o arquivo, melhor a compressão e gzip vai ganhar as mãos para baixo. Claro que você pode apoucar primeiro, em seguida, gzip depois.
Mas se estamos falando de gzip vs. apoucar em um pequeno pedaço de texto não mais do que 100bytes longa, uma comparação "objetivo" não é confiável, mesmo sem sentido - a menos que sair com um texto de linha de base para o estabelecimento de um meio padrão de aferição, como um Lorem Ipsum-tipo, mas escrito em Javascript ou CSS.
Então deixe-me propor a referência as últimas versões do jQuery e MooTools (as versões não comprimidos) usando o meu Fat-Free Minify código (PHP) (simplesmente tirando espaços em branco e comentários, há encurtamento de variáveis, não baseX-encoding)
Estes são os resultados de apoucar vs gzip (pelo conservador nível 5-compressão) vs. apoucar + 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%)
Antes que alguém salta a arma, isso não é uma batalha de bibliotecas JS.
Como você pode ver, minifying + gzipping dá-lhe uma melhor compressão em arquivos grandes . Minifying código tem suas vantagens, mas o principal fator é o quanto de espaço em branco e comentários estão presentes no código original. Neste caso, jQuery tem mais por isso dá melhor minification (muito mais espaços em branco na documentação em linha). A força de compressão Gzip é em quanto repetição não está no conteúdo. Portanto, não se trata de apoucar vs. gzip. Eles fazem as coisas de forma diferente. E você obtém o melhor dos dois mundos, usando ambos.
Por que não usar os dois?
É fácil de testar: basta colocar o texto de sua css em arquivos de texto e comprimir os arquivos usando um arquivador como gzip no linux.
acabei de fazer isso, e acontece que, pela primeira css, o tamanho é de 184 bytes e para o segundo 162 bytes.
Então, você está certo, espaço em branco importa mesmo para arquivos gzipped, mas como se pode ver a partir deste pequeno teste, para realmente pequenos arquivos, o tamanho do arquivo compactado pode ser maior do que o tamanho do arquivo original.
Este é apenas devido ao muito pouco tamanho de seu exemplo, para arquivos maiores, gzipping vai te arquivos menores.
Eu não vi qualquer menção mangling então eu estou postando meus resultados sobre isso.
Aqui estão alguns números que eu vim acima com o uso UflifyJS para minification e Gzip. Eu tinha cerca de 20 arquivos que eu concatenados em cerca de 2.5MB com comentários e tudo.
Arquivos Concat 2.5MB
uglify({
mangle: false
})
minified, sem deturpação: 929kb
uglify({
mangle: true
})
minified e mutilado: 617kb
Agora, se eu levar esses arquivos e gzip-lhes que terá 239KB e 190KB respectivamente.
Há um método muito simples de testar isso: Crie um arquivo consistindo apenas de espaço em branco e outro arquivo que é realmente vazia. Então Gzip ambos e comparar seus tamanhos. O arquivo com o espaço em branco que será, naturalmente, maior.
É claro que "humano" lossy compressão que preserva o layout ou algumas outras coisas importantes e remove qualquer não precisava de lixo (espaços em branco, comentários, coisas redundantes, etc.) será melhor do que um lossless compressão gzip.
Por exemplo, coisas como marcas ou nomes de funções provavelmente será de um determinado comprimento para descrever o significado. Substituindo isso por nomes de um caractere vai economizar muito espaço e não é possível com compressão sem perdas.
A propósito, para CSS existem ferramentas como CSS compressor que vai fazer o trabalho com perdas para você.
No entanto, você poderá obter os melhores resultados quando se combina "otimização lossy" e compressão sem perdas.
é claro que você pode testar - escrever o seu em um arquivo e gzip-lo com zlib . Você também pode tentar com o programa utilitário "gzip".
volta à sua pergunta - não há nenhuma relação definida entre o comprimento da fonte eo resultado comprimido. o ponto-chave é a 'entropia' (como é diferente a cada elementos na fonte).
Então, isso depende de como sua fonte é. por exemplo, lotes de espaços contínuos (ex,> 1000) pode ser comprimida como mesmo tamanho como algumas (ex, <10) espaços.
Este é o resultado quando gziping os dois arquivos
bytes File
45 min.txt
73 min.gz
72 normal.txt
81 normal.gz
Você está correto, minify + gzip resulta em menos bytes. Nenhuma prova científica embora.
Como é que você não tem nenhum método de testar?
Minify seu código em um arquivo, e deixá-lo "unminified" na outra. Upload para um servidor web capaz de gziping a saída (mod_deflate para Apache, por exemplo), instale a extensão Firebug para o Firefox, limpar o cache e acesso ambos os arquivos. separador de Firebug "NET" conterá a quantidade exata de dados transferidos, comparar esses e você tem a prova "empírica".
