javascript - htaccess - gzip compression online

Cómo "minificar" el código Javascript

Question

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

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

Answer 1

Actualmente hay 2 formas de minificar su código:

1. aplica minificadores en el lado del back-end de su aplicación; aquí la ventaja es que puede aplicar control de versiones y controlar 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 Cargado en el servidor: esto se usa mejor cuando tienes mucho código frontend (para ser minificado) JavaScript y CSS:

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 optimización de Javascript con Grunt.

2. puede utilizar 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 de forma manual. Te aconsejo que los uses cuando la cantidad de tu código javascript / css sea más pequeño, no muchos archivos

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

Answer 2

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

compilador de google javascript

Saludos
K

Answer 3

Hay una buena comparación de los compresores de JavaScript que deberías echarle un vistazo.

Answer 4

He escrito una pequeña secuencia de comandos que llama a una API para minimizar el guión, échale un vistazo:

#!/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 [..]

Answer 5

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

Answer 6

Puedes usar uno de los muchos minificadores de JavaScript disponibles.

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

Answer 7

Recientemente necesité realizar la misma tarea. Si bien los compresores que figuran en The JavaScript CompressorRater hacen un gran trabajo y la herramienta es muy útil, los compresores no funcionaban bien con algún código jQuery que estoy usando (verificaciones $ .getScript y jQuery.fn). Incluso el compresor de cierre de Google se ahogó en las mismas líneas. Si bien pude eventualmente haber solucionado los problemas, estaba muy entrecerrado 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 agradable y tiene implementación de lenguaje en Perl, PHP y .NET.

Answer 8

También hay un Minificador gratuito de Microsoft en codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

Es fácil trabajar con él y hace un buen trabajo.

Galón

Answer 9

Minería de bricolaje

Ningún minificador puede comprimir correctamente un código incorrecto.

En este ejemplo solo quiero mostrar cuánto hace un minificador.

Lo que debes hacer antes de minimizar

Y con respecto a jQuery ... no uso jQuery.jQuery es para navegadores antiguos, fue hecho por razones de compatibilidad ... revise 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 le gusta el $() 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 momento? ¿Qué tan grande es su descomprimido? ¿código? 5-6kb ...? No quiero hablar sobre las toneladas de complementos que agregas para hacerlo más fácil.

Código 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 las personas dejan de pensar y lo agregan a un minificador y lo publican.

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, loops y definiciones?

La mayoría de las veces ¡ NO !

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

OPCIONAL (aumenta el rendimiento y el código más corto)

1. utilizar operadores de taquigrafía
2. use operadores bit a bit (no use Math )
3. usa a, b, c ... para tus variables temporales
4. use la sintaxis anterior ( while , for ... no para forEach )
5. use los argumentos de la función como marcador de posición (en algunos casos)
6. eliminar innecesarios "{}","()",";",spaces,newlines
7. Usa el minificador

Ahora, si un minificador puede comprimir el código, lo está haciendo mal.

Ningún minificador puede comprimir correctamente un código incorrecto.

DIY

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 necesitas pensar lo que necesitas:

Antes de decir "Nadie escribiría un código como el que aparece a continuación", ve a ver 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 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 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

Convierte un número a 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)

caja del 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);

más 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 indexOf es lento, lee esto https://.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 bitwise / 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 de jsperf que muestran el rendimiento de taquigrafía y bitwsie si busca con su motor de búsqueda favorito.

Podría ir uno por horas ... pero creo que es suficiente por ahora.

si tiene alguna pregunta solo pregunte.

Y recuerda

Ningún minificador puede comprimir correctamente un código incorrecto.