Comment 'rapetisser' code Javascript

Question

JQuery a deux versions pour le téléchargement, on est Production (19KB, minified et gzippée), et l'autre est le développement (120KB, code non compressé).

Maintenant, la version compacte 19kb, si vous le téléchargez, vous verrez toujours un code exécutable javascript. Comment l'ont-ils compactifé? Et comment puis-je 'minifier' mon code comme ça aussi?

Answer 1

Il y a une belle comparison of JavaScript compressors vous devriez jeter un coup d'oeil.

Answer 2

Vous pouvez utiliser l'un des nombreux minificiers javascript disponibles.

• YUI Compressor
• Google closure compiler
• Dean Edwards packer
• JSMin

Answer 3

Google vient de rendre disponible un compilateur javascript qui peut rapetisser votre code, les branches de code mort elimiated et optimisations.

google javascript compiler

Cordialement
K

Answer 4

Il existe également gratuitement Minifier de Microsoft sur codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

Il est facile de travailler avec et fait du bon travail.

Gal

Answer 5

J'ai récemment eu besoin d'effectuer la même tâche. Alors que les compresseurs listés au The JavaScript CompressorRater font du bon travail et que l'outil est très utile, les compresseurs ne jouaient pas bien avec du code jQuery que j'utilise (contrôles $ .getScript et jQuery.fn). Même le Google Closure Compressor étouffé sur les mêmes lignes. Tandis que j'aurais pu finir par aplatir les plis il était loin de plisser beaucoup à faire constamment.

Celui qui a finalement fonctionné sans problème était UglifyJS (merci @Aries51), et la compression était seulement légèrement inférieure à toutes les autres. Et semblable à Google, il a une API HTTP. Packer est également agréable et a l'implémentation de langage en Perl, PHP et .NET.

Answer 6

Bricolage Minification

Pas minifier peut compresser correctement un mauvais code.

Dans cet exemple, je veux juste montrer combien fait un minifier.

Ce que vous devez faire avant réduisez la taille

Et en ce qui concerne jQuery ... je ne pas utiliser jQuery.jQuery est pour les anciens navigateurs, il a été fait pour des raisons de compatibilité .. vérifier caniuse.com, presque tout fonctionne sur tous les navigateurs (aussi ie10 est maintenant standardisé), 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 100kb jquery everythime? 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 original

Lorsque vous écrivez une fonction que vous avez une idée, commencer à écrire des choses et parfois vous vous retrouvez avec quelque chose comme le code suivant code.The works.Now la plupart des gens arrêtent de penser et d'ajouter ceci à un minifier et le publie.

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; 
} 

Ici iss le code minified (i ajouté les nouvelles lignes)

minified utilisant (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 tous ces vars, ifs, boucles & définitions nécessaires?

La plupart du temps NO!

1. Retirez inutile si, boucle, var
2. Conservez une copie de votre code d'origine
3. Utilisez le minifier

EN OPTION (augmente les performances & code plus court)

1. utiliser des raccourcis opérateurs
2. utiliser les opérateurs (ne pas bitwise utiliser Math)
3. lettres a, b, c ... pour votre température vars
4. utiliser l'ancienne syntaxe (while, for ... pas forEach)
5. utiliser la arguments de la fonction comme espace réservé (dans certains cas)
6. supprimer unneccessary "{}","()",";",spaces,newlines
7. Utilisez le minifier

maintenant, si un minifier c un compresser le code que vous faites mal.

Aucune minificatrice ne peut compresser correctement un mauvais code.

Bricolage

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 que vous avez besoin:

Avant de dire "Noone écrirait code comme celui ci-dessous" aller vérifier la première 10 questions ici ...

Voici quelques commo n exemples 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 

Alert 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 à une 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 plusieurs

var a=10.3899845 
var b=Math.floor(a); 
//same as 
var b=a|0;//numbers up to 10 decimal digits (32bit) 

switch case

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

essayer 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 indexOf est lu lente cette https://stackoverflow.com/a/30335438/2450730

numéros

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 beaux articles/sites que je trouve à environ bitwise/sténographie:

http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/

http://www.140byt.es/

http://www.jquery4u.com/javascript/shorthand-javascript-techniques/

Il y a aussi de nombreux sites jsperf montrant les performances de sténographie & bitwsie si vous effectuez une recherche avec votre searchengine préféré.

Je pourrais y aller pendant des heures ... mais je pense que c'est assez pour le moment.

Si vous avez des questions il suffit de demander.

Et rappelez-vous

Pas minifier peut compresser correctement un mauvais code.

Answer 7

Avec minify vous pouvez aussi le coder en base64. Cela rend votre fichier beaucoup plus compressé. Je suis sûr que vous avez vu les fichiers js qui sont enveloppés dans une fonction eval() avec des paramètres (p, a, c, k, e, r) passés. Je l'ai lu dans cet article How to Minify a Javascript File?

Answer 8

Il y a actuellement 2 façons de minifying votre code:

1. vous appliquez minifiers sur le côté arrière-plan de votre application - ici l'avantage est que vous pouvez appliquer versioning et sont plus en contrôle de votre code - vous pouvez pratiquement automatiser complètement le processus de minification et la meilleure pratique serait de l'appliquer avant que votre code ne soit téléchargé sur le serveur - ceci est mieux utilisé quand vous avez beaucoup de Javascript (et à minifier) Code CSS:

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

De nombreux outils de ce type sont également disponibles pour Node et npm - il est recommandé d'automatiser la mnification de Javascript avec Grunt.

2. Vous pouvez utiliser certains des outils gratuits de minification existants en ligne, qui vous permettent pratiquement de faire la même chose, mais manuellement. Je vous conseille de les utiliser lorsque la quantité de votre javascript/css code est plus petit - pas beaucoup de fichiers

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

Answer 9

J'ai écrit un petit scénario qui appelle une API pour obtenir votre script minified, vérifier it out:

#!/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; 
    } 
} 

Utilisation:

./minifier.pl a.js c.css b.js cc.css t.js j.js [..]