Cómo 'minificar' el código Javascript

JQuery tiene dos versiones para descargar, una es Producción (19KB, Minified y Gzip) , y la otra es Desarrollo (120KB, Código sin comprimir) .

Ahora la versión compacta de 19kb, si la descarga, verá que sigue siendo un código ejecutable javascript. ¿Cómo lo compactaron? ¿Y cómo puedo 'minificar' mi código así también?

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 !

1. Eliminar innecesario if, loop, var
2. Guarde una copia de su código original
3. Usa el minificador

OPCIONAL (aumenta el rendimiento y acorta el código)

1. utilizar operadores taquigráficos
2. usar operadores bit a bit (no usar Math)
3. usa a, b, c ... para tus vars temporales
4. usa la sintaxis antigua ( while, for... no forEach)
5. usar los argumentos de la función como marcador de posición (en algunos casos)
6. eliminar innecesario "{}","()",";",spaces,newlines
7. 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.

Puede usar uno de los muchos minificadores de JavaScript disponibles.

• Compresor YUI
• Compilador de cierre de Google
• Empacador Dean Edwards
• JSMin

Google acaba de poner a disposición un compilador de JavaScript que puede minimizar su código, eliminar ramas de código inactivas y más optimizaciones.

compilador javascript de google

Saludos
K

Junto con la minificación, también puede codificarlo en base64. Hace que su archivo esté mucho más comprimido. Estoy seguro de que ha visto archivos js que están empaquetados dentro de una función eval () con parámetros (p, a, c, k, e, r) pasados. Lo leí en este artículo ¿Cómo minificar un archivo Javascript?

He escrito un pequeño script que llama a una API para minificar su script, compruébelo:

#!/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 =~ /\.([a-z]+)/;

    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 =~ /^([^\/]+)\.([a-z]+)$/ ) {
        $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 [..]

Recientemente necesitaba realizar la misma tarea. Si bien los compresores enumerados en The JavaScript CompressorRater hacen un gran trabajo y la herramienta es muy útil, los compresores no funcionaban bien con el código jQuery que estoy usando ($ .getScript y jQuery.fn controles). Incluso el compresor de cierre de Google se ahogó en las mismas líneas. Si bien eventualmente podría haber solucionado los problemas, era mucho entrecerrar los ojos para hacer constantemente.

El que finalmente funcionó sin problemas fue UglifyJS (gracias @ Aries51 ), y la compresión fue solo un poco menor que todas las demás. Y similar a Google, tiene una API HTTP. Packer también es bueno y tiene implementación de lenguaje en Perl, PHP y .NET.

Actualmente hay 2 formas de minificar su código:

1. aplica minificadores en el lado del backend de su aplicación; aquí la ventaja es que puede aplicar el control de versiones y tiene más control de su código; puede automatizar prácticamente por completo el proceso de minificación y la mejor práctica sería aplicarlo antes de que su código sea subido al servidor: esto se usa mejor cuando tiene una gran cantidad de código JavaScript y CSS frontend (para ser minificado):

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

Muchas de estas herramientas también están disponibles para Node y npm; es una buena práctica automatizar la mnificación de Javascript con Grunt.

2. Puede usar algunas de las herramientas gratuitas existentes para la minificación que se ejecutan en línea; estas prácticamente le permiten hacer lo mismo, pero manualmente. Le aconsejo que los use cuando la cantidad de su código javascript / css sea menor, no muchos archivos

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

Puede usar el minificador de javascript de ubercompute.com para minimizar su código. Minimizará su código de javascript hasta un 75% de su versión original.