Compactação máxima com Brotli

Desenvolvedor Angular & Go, criador do Material Community Components, mantenedor do NGX-Translate e contribuidor do pREST.

Há pouco tempo, comecei a estudar como deixar minhas aplicações Angular e AngularJS menores e foi assim que encontrei o Brotli.

Brotli é um algoritmo de compactação criado pela Google, capaz de tornar nossos arquivos até 30% menores se comparados com uma compactação GZIP.

Em minha experiência, quanto maior o arquivo, melhor a compactação. Em alguns testes que realizei, utilizar o Brotli em um arquivo de aproximadamente 7MB fez com que o mesmo chegasse a 1MB. Com GZIP o tamanho alcançado foi de 1.4MB.

Sem dúvidas, esses 400KB de redução apenas nesse arquivo trazem um grande impacto tanto na velocidade de carregamento do app quanto no custo com transferência.

A Google por exemplo, economiza cerca de 1.5 PB em transferência de dados por dia, com a utilização do Brotli.

Ok, mas e os navegadores? Eles dão suporte ao Brotli?

Com certeza, se os navegadores não implementarem o algoritmo para descompactação de arquivos .br, de nada adianta utilizar o Brotli.

A boa notícia é que quase todos eles implementam, como podemos ver abaixo:

Navegadores que aceitam Brotli

E não é só isso, grandes empresas de CDN como Google Cloud, AWS, KeyCDN, entre outras já suportam a entrega de arquivos compactados com Brotli.

E como eu faço para os navegadores que não dão suporte?

Faça a compactação com o GZIP também!

Se sua aplicação tiver os arquivos compactados com GZIP e Brotli, o seu webserver (nginx, apache e etc) vai decidir qual formato utilizar na entrega.

Show me the code

OK… Primeiramente, é preciso instalar o Brotli em sua máquina.

Pelos testes que realizei, é possível instalar utilizando o gerenciador de pacote do seu OS – brew, apt-get e etc.

Feito isso, crie um arquivo com o nome Makefile, no mesmo nível de onde se encontra o seu package.json.

Copie o conteúdo abaixo e cole nesse novo arquivo.


build:
    ng build --prod --aot`

compress: 
    find dist -type f -exec sh -c "gzip < {} > {}.gz" \;
    find dist -type f -not -name "*.gz" -exec sh -c "bro --input {} --output {}.br" \;

Pronto! É só usar o comando make build para fazer o build de produção e make compress para compactar todos os arquivos com GZIP e Brotli.


BrazilJS é uma iniciativa NASC