Minificazione fai da te
Nessun minifier può comprimere correttamente un codice errato.
In questo esempio voglio solo mostrare quanto fa un minifier.
Cosa dovresti fare prima di minimizzare
E per quanto riguarda jQuery ... non uso jQuery.jQuery è per i vecchi browser, è stato creato per motivi di compatibilità .. controlla caniuse.com, quasi tutto funziona su tutti i browser (anche ie10 è standardizzato ora), penso che ora lo sia solo qui per rallentare la tua applicazione web ... se ti piace $()dovresti creare la tua semplice funzione E perché preoccuparsi di comprimere il tuo codice se i tuoi clienti hanno bisogno di scaricare lo script jquery da 100kb ogni volta? quanto è grande il tuo codice non compresso? 5-6kb ..? Per non parlare delle tonnellate di plugin a cui aggiungi per renderlo più facile.
Codice originale
Quando scrivi una funzione hai un'idea, inizia a scrivere cose ea volte ti ritrovi con qualcosa di simile al seguente codice. Il codice funziona. Ora la maggior parte delle persone smette di pensare e aggiunge questo a un minifier 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;
}
Ecco il codice minimizzato (ho aggiunto le nuove righe)
Minificato utilizzando ( http://javascript-minifier.com/ )
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
Ma sono necessarie tutte quelle variabili, se, loop e definizioni?
La maggior parte delle volte NO !
- Rimuovi if, loop, var non necessari
- Conserva una copia del codice originale
- Usa il minifier
OPZIONALE (aumenta le prestazioni e abbrevia il codice)
- utilizzare operatori stenografici
- usa operatori bit per bit (non usare
Math)
- usa a, b, c ... per i tuoi variabili temporanei
- usa la vecchia sintassi (
while, for... non forEach)
- usa gli argomenti della funzione come segnaposto (in alcuni casi)
- rimuovere inutilmente
"{}","()",";",spaces,newlines
- Usa il minifier
Ora, se un minifier può comprimere il codice, lo stai facendo male.
Nessun minifier 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
Devi sempre pensare a cosa ti serve:
Prima di dire "Nessuno scriverebbe un codice come quello qui sotto", controlla le prime 10 domande qui ...
Ecco alcuni esempi comuni che vedo ogni dieci minuti.
Desidera 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
Arrotonda 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=a.b.c.d.e}catch(e){}
!x||conole.log(x);
di 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 bit a bit / 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 cerchi con il tuo motore di ricerca preferito.
Potrei farne uno per ore .. ma penso sia abbastanza per ora.
se hai qualche domanda basta chiedere.
E ricorda
Nessun minifier può comprimere correttamente un codice errato.