Personal tools

Skip to content. | Skip to navigation

Sections

Blog

You are here: Home Blog JavaScript Minify com Python

JavaScript Minify com Python

Posted by Cleber J Santos at 17/03/2012 19:30 |
— filed under: , , , , ,

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 http://www.refresh-sf.com/yui/ 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 http://pypi.python.org/pypi/jsmin
 
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 180K, agora vamos criar um arquivo menor. Instale o egg jsmin 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()
 
CTRL+D 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 jquery-1.4.4.min.js com apenas 112k, 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 152k e ele foi para 64k, 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 JSMin é escrito e mantido por Douglas Crockford em C e pode ser acessado em https://github.com/douglascrockford/JSMin.
 
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 jsmin.c, 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 108k, menor ainda que o gerado em Python :D
 

O pulo do gato.

Descobri ainda que o jQuery usa o chamado packer (http://dean.edwards.name/packer/) que nada mais é que um compressor de JavaScript, após passar o arquivo que temos de 108k o resultado foi 60k, 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.
Document Actions
Spinner