Olá pessoal,
Depois de alguns anos trabalhando com Adobe Flex, estou de volta ao Javascript e CSS. Interessante voltar a esse ambiente, bastante desafiador, diga-se de passagem.
Nesse artigo, quero comentar com vocês algumas dicas sobre como comprimir seus arquivos Javascript para uma otimização na hora de distribuir sua app ou seu site.
O artigo é baseado em uma ferramenta chamada Closure, criada pela Google, que tem como objetivo auxiliar o desenvolvedor HTML a manter um código Javascript rápido e eficiente.
A Clousure Tools, é formada por 4 aplicativos para nos auxiliar em nosso dia-a-dia. Esse artigo trata apenas do Clousure Compiler. As outras 3 ferramentas disponíveis são:
O objetivo do Clousure Compiler é comprimir e otimizar seu código javascript. Para essa compressão a ferramenta procura remover todo o código não utilizado, reescrevendo seu arquivo, removendo também todos os espaços em branco (nossa famosa identação).
O Clousure Compiler também é responsável por verificar toda sua sintaxe, dessa forma, caso encontre algum problema, ele irá lhe alertar sobre os erros e não irá efetuar a compressão do código. Entretanto, por padrão ele apenas irá comprimir o arquivo.
Você pode trabalhar com o Clousure Compiler através de um UI online, através de uma API ou através de uma app em seu computador.
UI online
Para trabalhar com a UI online, você deve acessar essa url, e terá como resposta a tela abaixo:
Basicamente, a ideia é que você irá informar a URL do seu arquivo javascript, ou copiar e colar o código a ser compilado no TextArea logo abaixo. Feito isso, você deve escolher qual forma de compilação irá utilizar, e essa é a parte que você deve tomar muito cuidado.
São três formas de compilação:
Whitespace only (WHITESPACE_ONLY)
Essa opção é responsável por remover todos os “espaços” ou “identação” do seu arquivo js. Colocando todo o conteúdo em uma única linha. Exemplo:
Original
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');
Resultado
function hello(name){alert("Hello, "+name)}hello("New user");
Simple (SIMPLE_OPTIMIZATIONS)
Essa opção é responsável por uma pequena otimização do código e não apenas por remover espaços em branco. Ela remove referencias de objeto e otimiza a forma da codificação, porém não remove nenhuma função do seu código, por mais que ela não esteja sendo utilizada. Exemplo:
Original
function unusedFunction(note) {
alert(note['text']);
}
function displayNoteTitle(note) {
alert(note['title']);
}
var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);
Resultado "Simple"
function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={title:"Flowers"};displayNoteTitle(flowerNote);
Percebam que a função "unsedFunction" continua no código, mesmo não sendo utilizada. O código foi comprimido e alguns objetos tiveram uma alteração em sua declaração, reduzindo o tamanho do arquivo. Agora percebam a mesma situação apenas com a remoção de espaço:
Resultado "Whitespace Only"
function unusedFunction(note){alert(note["text"])}function displayNoteTitle(note){alert(note["title"])}var flowerNote={};flowerNote["title"]="Flowers";displayNoteTitle(flowerNote);
A opção "Simple" garante uma otimização de 25.76% do código, enquanto a versão Whitespace Only garante apenas uma otimização de 9.09%.
Advanced (ADVANCED_OPTIMIZATIONS)
Essa opção é responsável por grandes alterações no código submetido para otimização. Sua otimização é baseada na remoção ou re-estruturação de qualquer trecho de código que a ferramenta considere que não está sendo utilizado. É uma opção bastante perigosa e deve ser utilizada com muita cautela.
Caso seu javascript possua métodos que são utilizados apenas por outros arquivos, eles facilmente serão removidos da sua aplicação. Para evitar esse problema, você deve utilizar a versão Desktop do compilador, aonde você poderá informar mais de um arquivo para otimização.
Iremos submeter o mesmo trecho de código e analisaremos o resultado:
Original
function unusedFunction(note) {
alert(note['text']);
}
function displayNoteTitle(note) {
alert(note['title']);
}
var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);
Resultado
var a={};a.title="Flowers";alert(a.title);
Perceba que o compilador interpretou o código, e percebeu que uma função não estava sendo executada e a removeu, em seguida, removeu a função displayNoteTitle que era utilizada apenas para um alert da propriedade title do objeto e a substituiu por um alerta.
Os resultados são tentadores, essa opção reduz o código em 91.41%, porém ela deve ser utilizada com grande cuidado, perceba que ocorreram grandes modificações no código.
Para maiores informações, sugiro os links:
- Site do projeto
- Closure Compiler Service
- Getting Started — UI (base desse artigo)
- Getting Started — API
- Getting Started — Offline (.jar)
- Closure Compiler Documentation
Um abraço!
Comentários