GUJS

Compactação javascript consiste na otimização de código, a fim de diminuir ao máximo o tamanho dos arquivos que o browser deverá fazer o download na hora que um usuário acessa um determinado site. Além de deixar uma página muito mais leve e rápida, os arquivos compactados ocuparão menos espaço no servidor também. Como JavaScript é uma linguagem interpretada, o que os compactadores fazem é aplicar técnicas específicas como nome de variáveis com poucos caracteres, tirar espaços desnecessários, comentários, etc.

Um método simples de compactação é feito com o JSMIN. O que ele faz é simplesmente tirar comentários e espaços em branco desnecessários. Segue uma demonstração da compactação feita pelo JSMIN:

<script type="text/javascript">
//TAMANHO: 932 bytes

// The -is- object is used to identify the browser.  Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}
</script>

ficaria:

<script type="text/javascript">
// TAMANHO: 440 bytes
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
</script>

Como podem ver, apenas uma lógica simples já diminuiu em pouco mais de 50%. Esse é objetivo do JSMIN. Mas ainda existe uma outra maneira de compactar mais ainda seu código.

Essa outra técnica consiste em pegar as palavras usadas repetidas, como “function”, “var”, “alert”, e usar em seu lugar, uma variável de nome pequeno, como a, b, c. Depois, é feito um eval desse resultado que, via expressão regulares, irão substituir os a, b, c por seus nomes originais como “function”, “var”, “alert”, etc. Para pequenos códigos, essa técnina não faz muita diferença, mas para grandes códigos é muito mais eficiente. O mesmo código do exemplo anterior compactado ficaria:

<script type="text/javascript">
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\b'+c.toString(a)+'\b','g'),k[c])}}return p}('j 1={5:2.7=='m k i',g:2.h(),6:2.7=='l',3:2.u.s(),t:9(2.b.r(q))||9(2.b),n:2.o=='p'}1.a=1.3.4('a')>=0;d(1.3.4('c')>=0){1.5=1.6=e;1.c=8}d(1.3.4('f')>=0){1.5=1.6=e;1.f=8}',31,31,'|is|navigator|ua|indexOf|ie|ns|appName|true|parseFloat|mac|appVersion|opera|if|false|gecko|java|javaEnabled|Explorer|var|Internet|Netscape|Microsoft|win|platform|Win32|21|substr|toLowerCase|version|userAgent'.split('|')))
</script>

Neste caso ficou com 529 bytes. Mas experimente pegar grandes arquivos e passar essa compactação. Uso o framework MooTools e baixei uma versão compactada, e outra normal. A versão normal tem 140kb, já a compactada ficou com 49kb. Muita diferença neh. Só não esqueça de ao usar essas compactações javascript, sempre guarde a versão original do arquivo, pois muitas vezes o código fica ilegível. Não é a toa que os compactadores são chamados também de ofuscadores.

This entry was posted on Segunda-feira, Abril 30th, 2007 at 00:40 and is filed under Frameworks e APIs, Tutoriais Básicos, Técnicas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.