Compressores JavaScript: como e por que reduzir seu JS

Todos nós já passamos por isso, você aprendeu como construir um site incrível , mas depois de publicá-lo, é insuportavelmente lento.

Minimizar o seu javascript é uma maneira de acelerar os tempos de resposta do site (junto com compactando HTML ) e, felizmente para você, é um processo fácil. Hoje vou mostrar tudo o que você precisa saber.

O que significa minimizar?

O processo de minificação (ou minimizando ) é um conceito simples. Quando você escreve código em JavaScript ou qualquer outra linguagem, há muitos recursos que são necessários apenas para tornar o código mais fácil de ser entendido por humanos - os computadores não se importam com o que você chama de suas variáveis, ou quanto espaçamento existe entre colchetes, por exemplo.

Ao minimizar o código, você pode reduzir drasticamente o tamanho do arquivo. Um arquivo menor, portanto, será mais rápido para os usuários fazerem o download. Se você estiver escrevendo apenas uma ou duas linhas de JavaScript, provavelmente não haverá uma melhoria perceptível. No entanto, se você estiver escrevendo muito código ou usando grandes bibliotecas como jQuery, aumentos perceptíveis de desempenho e tamanhos de arquivo drasticamente reduzidos são facilmente alcançáveis!

Se você carregar o código de um CDN externo, como Bibliotecas hospedadas pelo Google , você usou um código reduzido.

como descobrir o que é minha placa-mãe

Qual é a aparência do código minimizado?

Vejamos alguns exemplos. É difícil ver o impacto da minimização em pequenas bases de código, então peço desculpas antecipadamente por sua longa extensão.

Aqui estão alguns não minimizado JavaScript de nosso guia para usar JSON com Python e JavaScript:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

Aqui está o código reduzido:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Esta versão reduzida do código é 39 por cento menor. Neste exemplo, os nomes das variáveis permanecem os mesmos, mas todos os espaços em branco e comentários foram removidos.

Aqui está outro exemplo de nosso guia para jQuery:

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

Aqui está o código reduzido:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

Desta vez, havia apenas um 26 por cento redução - isso ainda é muito bom para um bloco de código tão pequeno.

Aqui está um exemplo final de nosso guia para Javascript e o DOM:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

Observe como existem bastante de comentários e espaços em branco. A versão minimizada reduziu o tamanho do arquivo em 52 por cento :

você pode obter mensagens deletadas do Facebook de volta?

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Aqui estão os tamanhos de algumas bibliotecas JavaScript comuns em comparação com suas versões reduzidas:

Highcharts: 1 MB> 201 KB
jQuery: 270 KB> 90 KB
MooTools: 164 KB> 93 KB

Algumas dessas bibliotecas mostram uma redução significativa de tamanho quando compactadas ( ~ 80 por cento ), enquanto outros não são tão bons ( ~ 40 por cento ) Dito isso, qualquer economia tornará seu site mais rápido para os usuários e reduzirá a sobrecarga do servidor da web.

Como você minimiza?

Agora que você sabe como funciona e como é, vamos ver como fazê-lo. Não se preocupe, não há necessidade de modificar manualmente o seu código! Há uma variedade de ferramentas disponíveis gratuitamente que tratam do processo para você.

Eles funcionam de várias maneiras. A maioria das ferramentas online permite que você copie e cole o código, que eles irão processar e retornar para você na página. Freqüentemente, essas ferramentas também permitem que você carregue vários arquivos.

Aqui está um breve resumo das ferramentas online. A maioria deles funciona da mesma forma, então você não precisa se preocupar muito com qual escolher.

JSCompress - Eu pessoalmente uso este site mais se for para um trabalho rápido. É rápido de executar e eles até mostram as ferramentas que usaram para construí-lo.

Minificador de JavaScript - Essa ferramenta funciona bem, mas realmente brilha como uma API. Isso permite que você crie sua própria integração ou serviço no site existente.

Minificador de JavaScript - Outro site com o mesmo nome, esta ferramenta é tão simples quanto parece. Sem opções ou menus, apenas um botão.

Minify - Este site parece incrível, e os desenvolvedores claramente prestaram atenção aos detalhes aqui.

Esta lista pode durar para sempre. Existem tantas ferramentas online para minimizar sites que é difícil errar.

Ferramentas de redução também existem como ferramentas de linha de comando ou plug-ins para o seu Editor de JavaScript . Essas ferramentas geralmente são muito mais rápidas de usar e 'simplesmente funcionam' com o código existente. Não há necessidade de copiar e colar, e você não precisa extrair seu JavaScript de qualquer HTML ou CSS que possa estar no mesmo arquivo.

Se você estiver usando o Microsoft Visual Studio, o Bundler e Minifier extensão do mercado tem mais de 600.000 instalações! Não só isso, mas é atualizado regularmente e disponível no GitHub .

Se você é fã de Texto Sublime como eu sou, então o Minify pacote é o que você deseja. Com mais de 61.000 instalações, é um pacote muito popular e que também é disponível no GitHub , se desejar contribuir para um projeto de código aberto.

Finalmente, se você é um PyCharm usuário, você pode configure-o para integrar diretamente com muitas ferramentas de compressão comuns, como Compressor YUI . Muitas dessas ferramentas acionam diretamente as ferramentas online listadas acima.

Ressalvas

Lá tem para ser uma pegadinha, certo? Nada pode ser perfeito. Bem, sim, há um problema, mas é bastante pequeno e facilmente contornável:

O código reduzido não pode ser restaurado ao seu estado original.

Quando você minimiza qualquer código, sua forma original é perdida. Você precisa manter uma cópia dele se quiser ter alguma esperança de fazer alterações importantes com facilidade - não é suficiente usar o controle de versão.

Embora seja possível desminificar seu código, nunca mais será o mesmo. Todos os seus comentários valiosos são perdidos, para começar.

Este não é um grande problema, mas você precisa ter isso em mente ao codificar. Como regra básica, descomprimido > desenvolvimento e comprimido > produção.

Agora você sabe tudo o que há para saber sobre como minimizar o JavaScript! Minimizar o código é uma das maneiras de extrair o desempenho de um servidor, e todos os grandes sites estão fazendo isso.

Quais ferramentas você usa para reduzir seu código? Você ao menos se incomoda? Deixe-nos saber nos comentários abaixo!

como jogar iso no ps2

Crédito da imagem: NavinTar via Shutterstock

Compartilhado Compartilhado Tweet O email Exclua esses arquivos e pastas do Windows para liberar espaço em disco

Precisa liberar espaço em disco no seu computador Windows? Aqui estão os arquivos e pastas do Windows que podem ser excluídos com segurança para liberar espaço em disco.

Leia a seguir Tópicos relacionados

Programação
JavaScript
Java
Designer de Web

Sobre o autor Joe Coburn(136 artigos publicados)

Joe é graduado em Ciência da Computação pela University of Lincoln, no Reino Unido. Ele é um desenvolvedor de software profissional e, quando não está pilotando drones ou escrevendo música, pode ser encontrado tirando fotos ou produzindo vídeos.

Mais de Joe Coburn

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever