WTF é gzipping (e como é diferente da minificação)?
Tags: javascript, programming, portugues
Published: 2023-12-03 14:50:55

_**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):

```javascript
/**
 * 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:

```javascript
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](https://github.com/terser/terser). Ou você pode usar uma GUI como [CodeKit](https://codekitapp.com/) ou [Prepros](https://prepros.io/).

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](https://gomakethings.com/)