WTF é gzipping (e como é diferente da minificação)?

Nota: apenas traduzi o texto abaixo e postei aqui.

Gzipping

O formato .gzip é um formato de arquivo compactado, muito parecido com .zip. Reduz o tamanho dos seus arquivos em, em média, 70%. Isso é muita coisa!

Gzipping um arquivo significa enviá-lo neste formato compactado.

O legal dos arquivos compactados é que eles podem ser enviados compactados nesse formato a partir do server, e os navegadores podem descompactá-los e executá-los "on-the-fly". Mesmo que isso envolva algum trabalho para o navegador, pois quanto reduz o tamanho dos arquivos, tem uma melhoria dramática no desempenho.

O HTML, CSS e JavaScript combinados para um projetos JavaScript comum tem, por exemplo, 37,9kb. São três HTTP requests de ida e volta.

Após gzipping, o tamanho total é de apenas 11,4 KB, uma única request. Isso é uma redução enorme no tamanho.

Como gzip seus arquivos

Você pode ativar o gzipping em seu server.

Caso seu site esteja hospedado em um Apache server, você precisará modificar seu arquivo .htaccess. O HTML5 Boilerplate possui a configuração mais abrangente.

Com o ngingx, você precisará modificar seu arquivo de configuração.

Você pode testar se o gzipping está habilitado abrindo a aba Network nas developer tools do seu navegador. Cada recurso mostrará dois números: o tamanho real e o tamanho transferido.

Se o tamanho transferido for menor (em um valor significativo), gzip será ativado.

No entanto, certifique-se de verificar o botão Disable cache antes de testar.

Minificação

Minificação é o processo de remoção de comentários e espaços em branco do seu código.

Minificadores modernos, como TerserJS, também reescrevem nomes de variáveis para torná-los tão pequenos quanto possível e, às vezes, também fazem outras otimizações.

Por exemplo, digamos que você passou um código como este (não está bem otimizado):

/**
 * Soma um ou mais numbers juntos
 * @param  {Number} Os numbers para somar
 * @return {Number} O total
 */
var add = function () {
    // Converte o object arguments para um array
    var numbers = Array.prototype.slice.call(arguments);

    // Configura o total
    var total = 0;

    // Itera cada number e soma ele ao total
    numbers.forEach(function (number) {
        total = total + number;
    });

    return total;
};

Terser retornaria algo assim:

var add=function(){var r=Array.prototype.slice.call(arguments),a=0;return r.forEach(function(r){a+=r}),a};

Como você pode ver, todos os comentários desapareceram. As variáveis internas como numbers e total foram renomeadas (r e a, respectivamente, neste caso).

Mesmo total = total + number foi reescrito para total += number (quando então se torna a+=r após as variáveis serem renomeadas).

A quantidade de minificação de bytes que você economiza pode variar muito, dependendo de quanto seu código pode ser otimizado e de quão liberal você é em relação a comentários e espaços em branco.

Eu otimizo meu código para facilitar a leitura em vez da brevidade, portanto, um minificador economiza muito tamanho de arquivo. Sua milhagem pode variar.

Como minificar seu código

Você pode usar uma ferramenta de linha de comando como o Terser. Ou você pode usar uma GUI como CodeKit ou Prepros.

Todos eles fazem mais ou menos a mesma coisa, então escolha aquele com o qual você se sente mais confortável.

Você deve gzipping, minificar, ou ambos?

Alguns desenvolvedores dizem que gzipping tem muito mais impacto do que minificar que a minificação não vale a pena.

Sim, gzipar tem um impacto muito maior do que minificar. Mas os arquivos compactados e minificados são sempre menores do que aqueles apenas gzipped. É o suficiente para fazer a diferença? Depende.

Eu fiz alguns testes sobre isso no ano passado. Minha principal conclusão foi que se você se preocupa com o desempenho, sempre faça as duas coisas.

Fonte

Newsletter de Go Make Things