14 ferramentas para minimizar o Javascript

Minification Javascript é uma técnica que condensa seu script em uma pegada muito menor. Você perde a legibilidade humana, mas você consome uma largura de banda considerável - no final, Javascript é destinado ao seu navegador não para seus usuários.

A maioria dos sites de produção usa o minification Javascript, mas a maneira como isso é alcançado varia muito. Desde simples conversores on-line a ferramentas de GUI mais abrangentes até interfaces de linha de comando, nossas opções são bastante variadas. Neste artigo, vamos dar uma olhada como o minification do Javascript funciona, como podemos construí-lo em nosso fluxo de trabalho e quais são os prós e contras da redução.

Como funciona a mineração

A melhor maneira de aprender o que acontece quando você diminui seu código é dar uma olhada no Repositório do UglifyJS Github. Esse script é usado em muitos conversores on-line, além de ferramentas GUI e ferramentas de linha de comando, como o Grunt. Aqui estão algumas das transformações que se aplicam para tornar seu código mais curto:

Remove o espaço desnecessário
Encurta nomes de variáveis, geralmente para caracteres únicos
Junta-se a declarações var consecutivas
Converte matrizes em objetos quando possível
Otimiza instruções if
Calcula expressões constantes simples
etc.

Como um exemplo rápido, aqui está uma função que essencialmente escreve algum texto fora.

 função olá (texto) document.write (texto);

olá ('Bem-vindo ao artigo');

Vamos ver o que acontece quando minificamos isso. Observe a remoção de espaços e recuo e o encurtamento da variável de texto.

função ola (e) document.write (e) ola ("Bem-vindo ao artigo")

Ferramentas de Mineração Javascript

As ferramentas usadas para minimizar o Javascript podem ser amplamente categorizadas em 3 grupos: ferramentas online, ferramentas GUI e ferramentas de linha de comando.

Com ferramentas on-line, geralmente é uma questão de colar seu código e copiar o resultado imediatamente.
Ferramentas GUI geralmente contêm muito mais funcionalidade; Minimização JS é apenas uma pequena parte do que eles fazem.
As ferramentas de linha de comando também são geralmente mais abrangentes, oferecendo a minificação como um módulo.

Ferramentas Online

javascript-minifier.com é uma ferramenta agradável com uma API
O Online YUI Compressor é uma ferramenta mais poderosa que usa o compressor YUI, com muitas opções e capacidades de minificação CSS
jscompress.com é um minitorador sem frescuras, mas faz o trabalho
jsmini.com é outra opção simples, mas totalmente utilizável

O melhor de ferramentas on-line é a velocidade com a qual você pode trabalhar com elas. Ferramentas complexas de GUI e de linha de comando são reduzidas mais rapidamente, mas é necessário ter um projeto configurado para funcionar corretamente. A desvantagem dessas ferramentas é que elas geralmente fornecer pouca ou nenhuma personalização, pelo menos quando comparado com ferramentas de linha de comando.

Ferramentas de GUI

Koala é uma ferramenta gratuita para compilação LESS, SASS, JS minification e muito mais
O Prepros é um aplicativo pago multiplataforma que oferece ainda mais opções
Codekit é o meu aplicativo de escolha. É um aplicativo pago somente para Mac que oferece compilação de código, minificação, um servidor de visualização, gerenciamento de pacotes do Bower e muito mais
AjaxminGui é uma ferramenta gratuita e de uso único do Windows para minimizar o seu JS
UltraMinifier é um aplicativo gratuito para OS X que reduz CSS e JS com arrastar e soltar
Menor é uma ferramenta do OS X que minimiza e concatena arquivos para você

Eu mencionei dois tipos de aplicativos GUI aqui. Os aplicativos simples de um passo são muito parecidos com os seus equivalentes on-line. Eles são extremamente rápidos de usar, já que você pode simplesmente arrastar e soltar arquivos neles, sem necessidade de configuração. Dito isto, eles praticamente não oferece personalização.

Ferramentas GUI maiores (Prepros, Koala, Codekit) são ótimas para gerenciar projetos e dar a você um pouco mais de opções para compactação, mas elas fazem precisa de um pouco de configuração. Uma rápida redução do JS levaria cerca de 20 segundos de configuração, o que é muito, comparado ao processo de 2 segundos de ferramentas GUI on-line ou simples.

Por outro lado, eles oferecem mais recursos em geral e fornecem automação. Seus arquivos JS serão reduzidos cada vez que você salvá-los, sem necessidade de manualmente minificá-los. Se você está desenvolvendo algo em Javascript, este é definitivamente o caminho a percorrer.

Ferramentas de linha de comando

Minify é para aqueles que querem minify JS a partir da linha de comando, mas não querem configurar nada extravagante em Grunt ou Gulp
Uglify.js que mencionamos anteriormente também está disponível como uma ferramenta de linha de comando independente
Grunt tem uma extensão para minification do Javascript chamada grunt-contrib-uglify
Gulp também possui a minificação de JS usando o Uglify.js por meio do gulp-uglify

Ferramentas de linha de comando não são apenas para geeks do Linux! Eu não sou muito bom no terminal, mas criar coisas como Grunt e Gulp é fácil através de sua ótima documentação. A vantagem das ferramentas de linha de comando é a incrível quantidade de flexibilidade que você tem das opções de saída.

Por outro lado, existe pouco de uma curva de aprendizado. Acostumando-se à linha de comando leva um pouco (não muito) prática que você achará restritivo antes de começar a desfrutar dos benefícios.

visão global

Se você é iniciante no desenvolvimento web, eu recomendaria uma das três primeiras ferramentas GUI. Eles irão ajudá-lo a gerenciar seus projetos em geral e oferecer muito mais do que apenas a redução de JS.

Se você é um profissional experiente, provavelmente deveria Grunhido ou Gulp como estes oferecem o maior controle sobre tarefas de automação. Se você precisar minimizar um script rapidamente sem criar um projeto, as ferramentas de linha de comando podem economizar muito tempo.

Cada grupo de ferramentas tem seus prós e contras e, na verdade, você provavelmente acabará usando um de cada um deles em algum momento ou outro. Tenha em mente que quando em um ambiente de produção você deve sempre diminuir seu Javascript e CSS!