Minificación de bricolaje
Ningún minificador puede comprimir correctamente un código incorrecto.
En este ejemplo, solo quiero mostrar cuánto hace un minificador.
Qué debes hacer antes de minificar
Y con respecto a jQuery ... no uso jQuery.jQuery es para navegadores antiguos, se hizo por razones de compatibilidad ... revisa caniuse.com, casi todo funciona en todos los navegadores (también ie10 está estandarizado ahora), creo que ahora es solo aquí para ralentizar su aplicación web ... si lo desea $(), debe crear su propia función simple. ¿Y por qué molestarse en comprimir su código si sus clientes necesitan descargar el script jquery de 100kb cada vez? ¿Qué tan grande es su código sin comprimir? 5-6kb ..? Por no hablar de las toneladas de complementos que agrega para hacerlo más fácil.
Codigo original
Cuando escribes una función tienes una idea, empiezas a escribir cosas y a veces terminas con algo como el siguiente código. El código funciona. Ahora la mayoría de la gente deja de pensar y agrega esto a un minificador y lo publica.
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;
}
Aquí está el código minificado (agregué las nuevas líneas)
Minificado usando ( 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
}
Pero, ¿son necesarios todos esos vars, ifs, bucles y definiciones?
La mayoría de las veces ¡ NO !
- Eliminar innecesario if, loop, var
- Guarde una copia de su código original
- Usa el minificador
OPCIONAL (aumenta el rendimiento y acorta el código)
- utilizar operadores taquigráficos
- usar operadores bit a bit (no usar
Math)
- usa a, b, c ... para tus vars temporales
- usa la sintaxis antigua (
while, for... no forEach)
- usar los argumentos de la función como marcador de posición (en algunos casos)
- eliminar innecesario
"{}","()",";",spaces,newlines
- Usa el minificador
Ahora, si un minificador puede comprimir el código, lo estás haciendo mal.
Ningún minificador puede comprimir correctamente un código incorrecto.
Bricolaje
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Hace exactamente lo mismo que los códigos anteriores.
Actuación
http://jsperf.com/diyminify
Siempre debes pensar en lo que necesitas:
Antes de decir "Nadie escribiría un código como el que se muestra a continuación", revise las primeras 10 preguntas aquí ...
Aquí hay algunos ejemplos comunes que veo cada diez minutos.
Quiere una condición reutilizable
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Alerta sí solo si 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
Alerta si 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
Convertir un número en una cadena 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
Redondea un número
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Piso un número
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
caso de interruptor
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);
trata de atraparlo
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);
mas 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');
pero indexOfes lento lea esto https://stackoverflow.com/a/30335438/2450730
números
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;
Algunos buenos artículos / sitios que encontré sobre bit a bit / taquigrafía:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
También hay muchos sitios jsperf que muestran el rendimiento de taquigrafía y bitwsie si busca con su motor de búsqueda favorito.
Podría ir a uno durante horas ... pero creo que es suficiente por ahora.
si tiene algunas preguntas, pregunte.
Y recuerda
Ningún minificador puede comprimir correctamente un código incorrecto.