Come “minimizzare” il codice Javascript

JQuery ha due versioni per il download, una è Production (19 KB, Minified e Gzip) e l’altra è Development (120 KB, Codice non compresso) .

Ora la versione 19kb compatta, se la scarichi, vedrai che è ancora un codice eseguibile in javascript. Come l’hanno compattato? E come posso “minimizzare” il mio codice in questo modo?

C’è un bel confronto tra i compressori JavaScript che dovresti dare un’occhiata.

Minificazione fai da te

Nessun minificatore può comprimere correttamente un codice errato.

In questo esempio voglio solo mostrare quanto fa un minificatore.

Cosa dovresti fare prima di minificare

E per quanto riguarda jQuery … non uso jQuery.jQuery è per vecchi browser, è stato fatto per ragioni di compatibilità .. controlla caniuse.com, quasi tutto funziona su ogni browser (anche ie10 è standardizzato ora), penso che ora sia solo qui per rallentare la tua applicazione web … se ti piace $() dovresti creare la tua semplice funzione. E perché preoccuparti di comprimere il tuo codice se i tuoi clienti devono scaricare lo script jquery da 100kb in ogni momento? Quanto è grande il tuo non compresso? codice? 5-6kb ..? Non parlare delle tonnellate di plugin che aggiungi per renderlo più facile.

Codice originale

Quando scrivi una funzione hai un’idea, inizia a scrivere cose ea volte finisci con qualcosa come il seguente codice. Il codice funziona.Ora la maggior parte delle persone smette di pensare e aggiunge questo a un minificatore e lo pubblica.

 function myFunction(myNumber){ var myArray = new Array(myNumber); var myObject = new Object(); var myArray2 = new Array(); for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){ myArray2.push(myCounter); var myString = myCounter.toString() myObject[ myString ] = ( myCounter + 1 ).toString(); } var myContainer = new Array(); myContainer[0] = myArray2; myContainer[1] = myObject; return myContainer; } 

Qui emetto il codice miniato (ho aggiunto le nuove linee)

Minificato utilizzando ( http://javascript-minifier.com/ )

 function myFunction(r){ for(var n=new Array(r),t=new Object,e=new Array,a=0;a 

Ma sono necessari tutti quei vars, ifs, loop e definizioni?

Il più delle volte NO !

  1. Rimuovere inutili se, loop, var
  2. Conserva una copia del tuo codice originale
  3. Usa il minificatore

OPZIONALE (aumenta le prestazioni e il codice più corto)

  1. utilizzare gli operatori di stenografia
  2. utilizzare operatori bit a bit (non utilizzare Math )
  3. usa a, b, c ... per i tuoi orologi temporanei
  4. usa la vecchia syntax ( while , for ... not forEach )
  5. utilizzare gli argomenti della funzione come segnaposto (in alcuni casi)
  6. rimuovere inutili "{}","()",";",spaces,newlines
  7. Usa il minificatore

Ora, se un minificatore può comprimere il codice, lo fai nel modo sbagliato.

Nessun minificatore può comprimere correttamente un codice errato.

Fai da te

 function myFunction(a,b,c){ for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; return[b,c] } 

Fa esattamente la stessa cosa dei codici sopra.

Prestazione

http://jsperf.com/diyminify

Hai sempre bisogno di pensare a ciò di cui hai bisogno:

Prima di dire "Nessuno scriverà il codice come quello qui sotto" vai a controllare le prime 10 domande qui ...

Ecco alcuni esempi comuni che vedo ogni dieci minuti.

Vuoi una condizione riutilizzabile

 if(condition=='true'){ var isTrue=true; }else{ var isTrue=false; } //same as var isTrue=!!condition 

Avviso sì solo se esiste

 if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); } //same as !condition||alert('yes') //if the condition is not true alert yes 

Avviso sì o no

 if(condition==true){ var isTrue=true; }else{ var isTrue=false; } if(isTrue){ alert('yes'); }else{ alert('no'); } //same as alert(condition?'yes':'no') //if the condition is true alert yes else no 

Converti un numero in una stringa o viceversa

 var a=10; var b=a.toString(); var c=parseFloat(b) //same as var a=10,b,c; b=a+''; c=b*1 //shorter var a=10; a+='';//String a*=1;//Number 

Arrotondare un numero

 var a=10.3899845 var b=Math.round(a); //same as var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit) 

Piano un numero

 var a=10.3899845 var b=Math.floor(a); //same as var b=a|0;//numbers up to 10 decimal digits (32bit) 

scatola dell'interruttore

 switch(n) { case 1: alert('1'); break; case 2: alert('2'); break; default: alert('3'); } //same as var a=[1,2]; alert(a[n-1]||3); //same as var a={'1':1,'2':2}; alert(a[n]||3); //shorter alert([1,2][n-1]||3); //or alert([1,2][--n]||3); 

prova a prendere

 if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){ console.log(a[b][c][d][e]); } //this is probably the onle time you should use try catch var x; try{x=abcde}catch(e){} !x||conole.log(x); 

più se

 if(a==1||a==3||a==5||a==8||a==9){ console.log('yes') }else{ console.log('no'); } console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no'); 

ma indexOf è lento leggere questo https://stackoverflow.com/a/30335438/2450730

numeri

 1000000000000 //same as 1e12 var oneDayInMS=1000*60*60*24; //same as var oneDayInMS=864e5; var a=10; a=1+a; a=a*2; //same as a=++a*2; 

Alcuni bei articoli / siti che ho trovato su bitwise / stenografia:

http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/

http://www.140byt.es/

http://www.jquery4u.com/javascript/shorthand-javascript-techniques/

Ci sono anche molti siti jsperf che mostrano le prestazioni di stenografia e bitwsie se si esegue una ricerca con il motore di ricerca preferito.

Potrei andare uno per ore .. ma penso che sia abbastanza per ora.

se hai qualche domanda chiedi pure.

E ricorda

Nessun minificatore può comprimere correttamente un codice errato.

Puoi usare uno dei tanti minifiers javascript disponibili.

  • Compressore YUI
  • Compilatore di chiusura di Google
  • Packer di Dean Edwards
  • JSMin

Google ha appena reso disponibile un compilatore javascript che può minimizzare il codice, eliminare i rami del codice morto e altre ottimizzazioni.

compiler google javascript

Saluti
K

Oltre a minimizzare puoi anche codificarlo in base64. Rende il tuo file molto più compresso. Sono sicuro che hai visto i file js che sono racchiusi all’interno di una funzione eval () con parametri (p, a, c, k, e, r) passati. L’ho letto in questo articolo Come ridurre un file Javascript?

Di recente ho dovuto eseguire lo stesso compito. Mentre i compressori elencati su The JavaScript CompressorRater fanno un ottimo lavoro e lo strumento è molto utile, i compressori non stavano giocando bene con qualche codice jQuery che sto usando (controlli $ .getScript e jQuery.fn). Anche il Google Closure Compressor si è bloccato sulle stesse linee. Anche se alla fine avrei potuto eliminare i nodes, era molto difficile fare lo strabismo per farlo costantemente.

Quello che alla fine ha funzionato senza problemi è stato UglifyJS (grazie a @ Aries51 ), e la compressione è stata solo leggermente inferiore a tutte le altre. E simile a Google ha un’API HTTP. Packer è anche carino e ha implementazioni linguistiche in Perl, PHP e .NET.

C’è anche un minificatore gratuito da Microsoft su codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

È facile lavorare e fa un buon lavoro.

ragazza

Ci sono attualmente 2 modi per minimizzare il tuo codice:

  1. applichi i minifiers sul lato back-end dell’applicazione – qui il vantaggio è che puoi applicare il controllo delle versioni e avere più controllo sul tuo codice – puoi praticamente automatizzare completamente il processo di minimizzazione e la pratica migliore sarebbe applicarla prima che il tuo codice sia caricato sul server – questo è il modo migliore di utilizzarlo quando hai un sacco di frontend (da minificare) Javascript e codice CSS:

http://yui.github.io/yuicompressor/

Molti di questi strumenti sono disponibili anche per Node e npm: è buona norma automatizzare la mnificazione di Javascript con Grunt.

  1. puoi utilizzare alcuni degli strumenti gratuiti esistenti per la minificazione che sono in esecuzione online: questi ti consentono praticamente di fare lo stesso, ma manualmente. Ti consiglio di usarli quando la quantità di codice javascript / css è minore, non molti file

http://www.modify-anything.com/

Ho scritto un piccolo script che chiama un’API per ottenere lo script minificato, verificarlo:

 #!/usr/bin/perl use strict; use warnings; use LWP::UserAgent; use HTTP::Request; use Fcntl; my %api = ( css => 'https://cssminifier.com/raw', js => 'https://javascript-minifier.com/raw' ); my $DEBUG = 0; my @files = @ARGV; unless ( scalar(@files) ) { die("Filename(s) not specified"); } my $ua = LWP::UserAgent->new; foreach my $file (@files) { unless ( -f $file ) { warn "Ooops!! $file not found...skipping"; next; } my ($extn) = $file =~ /\.([az]+)/; unless ( defined($extn) && exists( $api{$extn} ) ) { warn "type not supported...$file...skipping..."; next; } warn "Extn: $extn, API: " . $api{$extn}; my $data; sysopen( my $fh, $file, O_RDONLY ); sysread( $fh, $data, -s $file ); close($fh); my $output_filename; if ( $file =~ /^([^\/]+)\.([az]+)$/ ) { $output_filename = "$1.min.$2"; } my $resp = $ua->post( $api{$extn}, { input => $data } ); if ( $resp->is_success ) { my $resp_data = $resp->content; print $resp_data if ($DEBUG); print "\nOutput: $output_filename"; sysopen( my $fh, $output_filename, O_CREAT | O_WRONLY | O_TRUNC ); if ( my $sz_wr = syswrite( $fh, $resp_data ) ) { print "\nOuput written $sz_wr bytes\n"; my $sz_org = -s $file; printf( "Size reduction %.02f%%\n\n", ( ( $sz_org - $sz_wr ) / $sz_org ) * 100 ); } close($fh); } else { warn: "Error: $file : " . $resp->status_line; } } 

Uso:

 ./minifier.pl a.js c.css b.js cc.css t.js j.js [..]