Minification de bricolage
Aucun minificateur ne peut compresser correctement un mauvais code.
Dans cet exemple, je veux juste montrer ce que fait un minificateur.
Ce que vous devez faire avant de minifier
Et en ce qui concerne jQuery ... je n'utilise pas jQuery.jQuery est pour les anciens navigateurs, il a été fait pour des raisons de compatibilité .. vérifiez caniuse.com, presque tout fonctionne sur tous les navigateurs (aussi ie10 est normalisé maintenant), je pense que maintenant c'est juste ici pour ralentir votre application Web ... si vous aimez le, $()vous devriez créer votre propre fonction simple.Et pourquoi prendre la peine de compresser votre code si vos clients ont besoin de télécharger le script jquery de 100 Ko à chaque fois? Quelle est la taille de votre code non compressé? 5-6kb ..? Ne pas parler des tonnes de plugins que vous ajoutez pour le rendre plus facile.
Code d'origine
Lorsque vous écrivez une fonction, vous avez une idée, commencez à écrire des choses et parfois vous vous retrouvez avec quelque chose comme le code suivant.Le code fonctionne.Maintenant, la plupart des gens arrêtent de penser et ajoutent ceci à un minifier et le publient.
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;
}
Voici le code minifié (j'ai ajouté les nouvelles lignes)
Minifié à l'aide de ( 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
}
Mais est-ce que tous ces vars, ifs, boucles et définitions sont nécessaires?
La plupart du temps NON !
- Supprimer les if, loop, var inutiles
- Conservez une copie de votre code d'origine
- Utilisez le minificateur
OPTIONNEL (augmente les performances et le code plus court)
- utiliser des opérateurs de raccourcis
- utiliser des opérateurs au niveau du bit (ne pas utiliser
Math)
- utilisez a, b, c ... pour vos variables de température
- utiliser l'ancienne syntaxe (
while, for... pas forEach)
- utiliser les arguments de la fonction comme espace réservé (dans certains cas)
- enlever inutile
"{}","()",";",spaces,newlines
- Utilisez le minificateur
Maintenant, si un minificateur peut compresser le code, vous le faites mal.
Aucun minificateur ne peut compresser correctement un mauvais code.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Il fait exactement la même chose que les codes ci-dessus.
Performance
http://jsperf.com/diyminify
Vous devez toujours penser à ce dont vous avez besoin:
Avant de dire "Personne n'écrirait un code comme celui ci-dessous", vérifiez les 10 premières questions ici ...
Voici quelques exemples courants que je vois toutes les dix minutes.
Vous voulez une condition réutilisable
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Alerte oui seulement si elle existe
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
Alerte oui ou non
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
Convertir un nombre en chaîne ou vice versa
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
Arrondir un nombre
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Étage un numéro
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
cas de commutateur
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);
essayez d'attraper
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);
plus si
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');
mais indexOfest lent à lire ceci https://stackoverflow.com/a/30335438/2450730
Nombres
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;
Quelques bons articles / sites que j'ai trouvés à propos du bitwise / shorthand:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Il existe également de nombreux sites jsperf montrant les performances de la sténographie et du bitwsie si vous effectuez une recherche avec votre moteur de recherche préféré.
Je pourrais en faire un pendant des heures ... mais je pense que c'est suffisant pour le moment.
si vous avez des questions, posez-les simplement.
Et rappelez-vous
Aucun minificateur ne peut compresser correctement un mauvais code.