2010-07-01 21 views
15

Mi chiedevo quali fossero le differenze/i vantaggi del packer rispetto al minificatore, cioè dovresti distribuire una versione compressa o minificata nella tua app web?javascript packer versus minifier

codice Esempio:

var layout = { 

    NAVVISIBLE : 1, 

    Init : function() 
    { 
     this.Resize(); 
    }, 

    Dimensions : function() 
    { 
     var d = document, s = self, w, h; 
     if (s.innerHeight) 
     { w = s.innerWidth; h = s.innerHeight; } 
     else if (d.documentElement && d.documentElement.clientHeight) 
     { w = d.documentElement.clientWidth; h = d.documentElement.clientHeight; } 
     else if (d.body) 
     { w = d.body.clientWidth; h = d.body.clientHeight; } 
     return new Array(parseInt(w), parseInt(h)); 
    }, 

    Resize : function() 
    { 
     var dim = this.Dimensions(); 
     try 
     { 
      $('tbl_container').width = px(dim[0] - 25); 
      $('row_container').height = px(dim[1] - 100); 
      $('dat_container').width = px(dim[0] - (this.NAVVISIBLE ? 275 : 25)); 
      $('dat_container').height = px(dim[1] - 100); 
     } 
     catch(e) {} 
    }, 

    GoSideways : function() 
    { 
     var nc = $('nav_container'); 
     var dc = $('dat_container'); 
     nc.style.display = this.NAVVISIBLE ? 'none' : ''; 
     dc.width = px(parseInt(dc.width) + (this.NAVVISIBLE ? 250 : -250)); 
     this.NAVVISIBLE ^= 1; 
    }, 

    FrameLoad : function(url) 
    { 
     if (url) 
      content_frame.document.location = url; 
    } 
}; 

minified:

var layout={NAVVISIBLE:1,Init:function() 
{this.Resize();},Dimensions:function() 
{var d=document,s=self,w,h;if(s.innerHeight) 
{w=s.innerWidth;h=s.innerHeight;} 
else if(d.documentElement&&d.documentElement.clientHeight) 
{w=d.documentElement.clientWidth;h=d.documentElement.clientHeight;} 
else if(d.body) 
{w=d.body.clientWidth;h=d.body.clientHeight;} 
return new Array(parseInt(w),parseInt(h));},Resize:function() 
{var dim=this.Dimensions();try 
{$('tbl_container').width=px(dim[0]-25);$('row_container').height=px(dim[1]-100);$('dat_container').width=px(dim[0]-(this.NAVVISIBLE?275:25));$('dat_container').height=px(dim[1]-100);} 
catch(e){}},GoSideways:function() 
{var nc=$('nav_container');var dc=$('dat_container');nc.style.display=this.NAVVISIBLE?'none':'';dc.width=px(parseInt(dc.width)+(this.NAVVISIBLE?250:-250));this.NAVVISIBLE^=1;},FrameLoad:function(url) 
{if(url) 
content_frame.document.location=url;}}; 

imballato:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5 B={3:1,C:6(){2.n()},v:6(){5 d=k,s=y,w,h;9(s.u){w=s.A;h=s.u}r 9(d.a&&d.a.c){w=d.a.p;h=d.a.c}r 9(d.b){w=d.b.p;h=d.b.c}D z x(g(w),g(h))},n:6(){5 7=2.v();F{$(\'N\').8=4(7[0]-o);$(\'P\').m=4(7[1]-l);$(\'i\').8=4(7[0]-(2.3?E:o));$(\'i\').m=4(7[1]-l)}L(e){}},H:6(){5 t=$(\'I\');5 j=$(\'i\');t.J.G=2.3?\'Q\':\'\';j.8=4(g(j.8)+(2.3?q:-q));2.3^=1},M:6(f){9(f)O.k.K=f}};',53,53,'||this|NAVVISIBLE|px|var|function|dim|width|if|documentElement|body|clientHeight|||url|parseInt||dat_container|dc|document|100|height|Resize|25|clientWidth|250|else||nc|innerHeight|Dimensions||Array|self|new|innerWidth|layout|Init|return|275|try|display|GoSideways|nav_container|style|location|catch|FrameLoad|tbl_container|content_frame|row_container|none'.split('|'),0,{})) 
+1

Non dimenticare [Google Closure Compiler] (http://code.google.com/closure/compiler/) o ... Ci sono un sacco di librerie JS che usano questo per la loro compressione piuttosto che minify o pack (jQuery lo usa!). – gnarf

risposta

16

Pranzo è più piccolo, ma è più lento.

E anche più difficile eseguire il debug.

La maggior parte delle strutture e dei plug-in noti sono solo minime.

Dai un'occhiata al minificatore di google: http://code.google.com/intl/en-EN/closure/compiler/ Offrono un plug-in firebug per il debug del codice minisito.

+1

[Google Closure Compiler] (http://closure-compiler.appspot.com/home) produce spesso file più grandi di [Microsoft Ajax Minifier] (http://sundgaard.dk/javascript-minify.aspx) dalla mia esperienza a meno che non si utilizzi il flag ADVANCED_OPTIMIZATIONS, che probabilmente spezzerà il codice e non è molto pratico nell'uso in produzione. Incoraggio le persone a utilizzare entrambi gli strumenti sopra e utilizzare qualsiasi codice sia più piccolo. – 10basetom

+0

@ 10basetom Perché non utilizzare entrambi insieme? Fai prima GCC e poi MAM. Lo strumento Microsoft sembra togliere alcuni byte in più dal codice prodotto da GCC. – tomasz86

1

A seconda del codice imballato, la soluzione imballata può portare a errori di script, mentre il minified funzionerà.

Quindi prova con diversi browser, dopo aver imballato il tuo codice. Se non funziona più, prova la versione minificata, che dovrebbe sempre funzionare.

3

Entrambi hanno lo scopo di ridurre le dimensioni di JavaScript per abilitare il download rapido sul browser client.

Il minificatore rimuove solo le cose non necessarie come i caratteri dello spazio bianco e rinomina la variabile in nomi più piccoli laddove possibile. Ma un Packer fa un passo avanti e fa tutto ciò che può fare per ridurre al minimo le dimensioni di JavaScript. Ad es. converte il codice sorgente in Base62 mentre conserva i suoi mapping per essere valutato dal client.

+2

I minificatori tipicamente rinominano anche le variabili. – mhenry1384

+0

concordato. Molti minifier forniscono anche un'opzione per questo. – IsmailS

14

Packer fa più quindi solo rinominare vars e argomenti, in realtà esegue il mapping del codice sorgente utilizzando Base62 che deve quindi essere ricostruito sul lato client tramite eval() per poter essere utilizzato.

L'inoltro laterale di eval() è un problema malevolo qui, questo può anche creare una grande quantità di sovraccarico sul client durante il caricamento della pagina quando si iniziano a riempire le librerie JS più grandi, come jQuery. Questo è il motivo per cui solo fare minify sulla produzione JS è raccomandato, dal momento che se si ha abbastanza codice da dover eseguire il packing o il minify, si ha abbastanza codice per fare eval() soffocare il client durante il caricamento della pagina.

Per una buona minifier, vorrei guardare ad usando il compilatore di chiusura di Google http://code.google.com/closure/compiler/

La modalità SIMPLE_OPTIMIZATIONS è quello che mi consiglia di utilizzare, mentre pulisce spazi bianchi/commenti e munges (riduce) variabili. Fa anche alcune semplici modifiche al codice che sostanzialmente equivalgono alla pulizia del codice e alle micro ottimizzazioni. Per ulteriori informazioni, consultare la Guida introduttiva all'applicazione Compilatore di chiusura o il controllo del README pacchettizzato.

Il compressore YUI è un'altra opzione (da Yahoo) ma non riduce le dimensioni del file quanto CC. C'è anche uno strumento di Microsoft, il nome mi sfugge al momento ma sembra che fornisca risultati simili a CC. Quella potrebbe essere un'opzione migliore o peggiore, a seconda del tuo ambiente. Ne ho letto solo di sfuggita, quindi sarebbero necessarie ulteriori indagini.

0

Un "packer" è uguale a un "minificatore". Lo strumento più comune che si definisce "packer" è http://dean.edwards.name/packer/ che fornisce l'opzione (disattivata per impostazione predefinita) alla codifica base62. La codifica Base62 è probabilmente una cattiva idea: https://stackoverflow.com/a/1351624/24267.

+1

Un packer non è uguale a un minificatore. Packer richiede al client di 'eval' e ricostruire il javascript prima che sia utilizzabile. Quindi, anche se il packer potrebbe restringere le cose meglio di un minificatore, ha il potenziale per essere più lento. –

+2

Se la codifica base62 è disattivata in "packer" di Dean Edwards, non richiede alcuna valutazione lato client. È disattivato per impostazione predefinita. – mhenry1384

3

Se il server esegue il gzip dei file prima di inviarli al browser (che è molto spesso il caso), allora packer è non la strada da percorrere. Ho testato un certo numero di file, e anche se packer produce file più piccoli di minification, crea file zippati più grandi. Anche se non sono un esperto, penso che la ragione sia abbastanza diretta.

Una grande parte dello zipping è trovare sequenze di caratteri ripetute e sostituirle con un segnaposto più corto da disfare in un secondo momento. Questa è la stessa cosa che fa il packer, eccetto che gli algoritmi zip sono molto più efficienti. Quindi, quando impacchettate un file, siete in un modo che lo preclude, ma con un algoritmo meno efficiente di un vero file zip. Ciò lascia meno lavoro all'algoritmo di zip, con una conseguente diminuzione dell'efficienza di zipping.

Quindi, se si esegue il zipping dei file, quindi packer produrrà effettivamente download più grandi. Aggiungete a ciò gli aspetti negativi aggiuntivi del packer menzionato nelle risposte di cui sopra, e non vi è davvero alcuna buona ragione per usare packer.