JavaScript Minify com Python

Trabalhando em um projeto recentemente precisei gerar um arquivo menor do jQuery que eu havia modificado, e com isso comecei a me perguntar como o jquery.com o fazia com seus arquivos por exemplo: 

• jquery-1.7.1.js 244K
• jquery-1.7.1.min.js 92K
  
  

Notaram  a diferença de tamanho? Pois bem, isso me levou a pesquisas, que por sua vez me levou a diversos resultados, uma delas é o link 

 que nada mais é que uma interface Web que reduz o arquivo como eu queria fazer.

Porém que queria mais que isso, não quero depender de entrar em um site para gerar um arquivo menor, então achei Egg que faz exatamente o que eu queria, e melhor que isso, é pytonica :D 

. 

Vamos então a solução, para isso vamos usar o próprio jQuery só para testarmos que funciona após ter minimizado o tamanho do arquivo, é claro que isso é apenas um teste, pois o jQuery já lhe dará o arquivo dele como mostrado acima, compactado.

Vamos criar uma pasta chamada cobaia, dentro dessa pasta baixe o arquivo mencionado e visualize o tamanho dele:

$ mkdir cobaia $ curl -O http://code.jquery.com/jquery-1.4.4.js $ ls -hs *.js

No momento você verá o que o arquivo contém

, agora vamos criar um arquivo menor. Instale o egg

no seu python com o comando:

$ easy_install jsmin

Ou 

$ pip install jsmin

Feito isso acesse o prompt do Python (Estou usando Python 2.6) e vamos converter assim:

$ python

>>> from os import path >>> from os.path import join >>> >>> # Usei o cStringIO por ser mais rápido que o StringIO implementado em Python >>> from cStringIO import StringIO >>> >>> # As linha abaixo é o que nos garante o uso do jsmin >>> import jsmin >>> jmin = jsmin.JavascriptMinify() >>> >>> base = path.dirname(path.abspath(path.realpath(__name__))) >>> >>> # Abrimos o arquivo original apenas como leitura >>> filejs = open(join(base, 'jquery-1.4.4.js'),'r') >>> >>> # Pegamos o nome do arquivo original e concatenamos com .min.js >>> filename_out =  str(str(filejs.name.split('/')[-1]).split('.js')[0] + '.min.js') >>> >>> file_out = StringIO() >>> file_out.write("") >>> >>> # Gerando um novo arquivo com modo de escrita >>> file_out = open(join(base, filename_out),'wb') >>> >>> # Por fim passamos para o minify um arquivo de entrada e o de saída >>> jmin.minify(filejs,file_out) >>> file_out.close()

para sair do console python.

Mantive o exemplo acima comentado para que possam melhor entender o que foi feito. Agora podemos usar novamente o comando para ver o tamanho dos arquivos, antes e depois.

$ ls -hs *.js

Note que agora temos um novo arquivo com o nome de 

com apenas

, pode não parecer muito, mas tenha certeza que isso ajuda muito no desempenho do seu site, ainda mais se você tiver bem mais arquivos.

Fiz este mesmo teste em um arquivo que eu tinha de

e ele foi para

, então veja bem a diferença. Vale testar com seus arquivos, claro que é sempre bom fazer um backup antes ;)

Outra forma de fazer.

Essa é a outra forma de fazer, mas não é pythonica. Achei importante mencionar essa outra forma de fazer, que na verdade é exatamente de onde partiu a idéia em Python e provavelmente as demais ;)

O código e projeto original do

é escrito e mantido por

 em

e pode ser acessado em 

.

Jsmin é um filtro que omite ou modifica alguns caracteres. Isto não altera o comportamento do programa que estamos reduzindo. O resultado pode ser mais difícil depurar. Vai ser mais difícil de ler.

Após baixar o 

, vamos compilar e usar, abaixo mostro como compilar e como usar, lembrando que estamos usando o arquivo do jquery como modelo. O comando segue o mesmo modelo que em Python, neste caso o binário do jsmin também requer um arquivo de entrada e outro de saída.

$ gcc jsmin.c -o jsmin $ ./jsmin < jquery-1.4.4.js > jquery-1.4.4.min.js

Pronto! Agora temos um arquivo com

, menor ainda que o gerado em Python :D

O pulo do gato.

Descobri ainda que o jQuery usa o chamado packer (

) que nada mais é que um compressor de JavaScript, após passar o arquivo que temos de

o resultado foi

, então aqui descobrimos o pulo do grato usado pelo jQuery.

É isso ai, agora você já pode começar a se divertir e colocar um pouco mais de performance em seu site.