Compactação máxima com Brotli

Em:

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.

Cursos recomendados pela BrazilJS

    • Sons para focar no trabalho

      Vivemos na era da informação e da distração. É tanto conteúdo para se consumir que, em alguns momentos, é fácil perder o foco. Eu, pessoalmente, gosto mesmo é de ouvir música enquanto trabalho. Sendo mais preciso, um bom e velho Rock ‘n Roll. Mas existem algumas alternativas interessantes para quem não gosta ou não consegue […]

    • Weekly #176 – Adeus Firebug, novos releases de DSW e Babylon e testes com AVA e Jest

      A BrazilJS Weekly é a seleção semanal que reúne as novidades sobre o desenvolvimento Web no Brasil e no mundo. Ainda não é inscrito? Faça o seu cadastro e receba nossa Newsletter semanal 😎👊🙂👌👍 Sugira conteúdo para a Weekly usando o nosso canal de issues no Github. Um agradecimento especial aos 10 colaboradores da edição […]

    • Erick Krominski será o apresentador da BrazilJS Conf 2017!

      Mais uma grande novidade que estamos trazendo para a edição 2017 é a presença de um mestre de cerimônias profissional! Boas vindas ao Erick Krominski!

    Patrocinadores BrazilJS

    Gold

    Silver

    Bronze

    Apoio

    BrazilJS® é uma iniciativa NASC.