Otimização de Código

Minificação de Código

Minificar (otimizar) código é uma boa prática para melhorar a performance a aplicação.
Códigos menores, tudo em uma linha, sem espaços, etc.
Desta forma o browser conseguirá baixá-los mais rapidamente.
Economizar dados móveis em cenários onde o uso é feito através dos mesmos.
build-dev: Código fonte para desenvolvimento.
build-prod: Código fonte mimificado (fechar o código).
Source map: Arquivo que vai mostrar as posições do arquivo mimificado em relação ao arquivo original.

Técnicas de minificação e ferramentas

  • Minify
  • é uma das ferramentas mais completas de minificação. Gerencia a minificação, caching, e comprime os arquivos CSS, HTML e JavaScript. Também oferece integração com frameworks e aplicações web populares tais como o WordPress e Magento.
  • Minificação HTML
  • O google fornece o PageSpeed Insights https://pagespeed.web.dev para avaliar o desempenho de um site. Um site e extensão do Chrome que recomenda melhoras de performance para qualquer website. Ele também fornece uma ferramenta que minifica o HTML do site aberto.
  • Minificação CSS
  • Como o CSS provavelmente será alterado com frequência, existem diversas ferramentas online que fornecem minificação instantânea. O CSS Minifier é um jeito fácil e rápido de minificar, enquanto o Refresh-SF usa diversas ferramentas para minificar o HTML, CSS e JavaScript.
  • Minificação JavaScript
  • A ferramenta do Google de Otimização de JavaScript chamada de Closure Compiler que cria uma versão mais eficiente de arquivos JavaScript. Quando o dev cria ou altera um arquivo JavaScript, pode-se usar o Closure Compiler para minificar o código. O novo arquivo é publicado no servidor onde ele pode ser acessado pelo navegador web.

    References