Comment "minifier" le code Javascript

BRICOLAGE Minification

aucun mineur ne peut compresser correctement un mauvais code.

Dans cet exemple, je veux juste montrer combien une minifier.

ce que vous devez faire avant de minify

et concernant jQuery... je n'utilise pas jQuery.jQuery est pour les vieux navigateurs,il a été fait pour des raisons de compatibilité .. vérifier caniuse.com presque tout fonctionne sur chaque navigateur (aussi ie10 est standardisé maintenant), je pense que maintenant il est juste là pour ralentir votre application web...si vous aimez le $() , vous devez 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..? Sans parler des tonnes de plugins-vous ajouter pour le rendre plus facile.

Code Original

quand vous écrivez une fonction vous avez une idée, commencez à écrire des trucs et parfois vous finissez avec quelque chose comme le code suivant.Le code fonctionne.Maintenant, la plupart des gens arrêtent de penser et ajoutent cela à un mini-ordinateur 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 réduit (j'ai ajouté les nouvelles lignes)

Minimisé à 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 !

1. Supprimer inutiles si,en boucle,var
2. conservez une copie de votre code original
3. utiliser le minificateur

"optionnel (augmente la performance et le code plus court)

1. use opérateur de sténographie
2. utiliser des opérateurs bitwise (ne pas utiliser Math )
3. utiliser a,b,c... pour votre température
4. utilisez l'ancienne syntaxe ( while , for ... pas forEach )
5. utiliser les arguments de la fonction comme paramètre (dans certains cas)
6. supprimer unneccessary "{}","()",";",spaces,newlines
7. utiliser le minificateur

maintenant si un minifieur peut compresser le code, vous le faites mal.

aucun mineur 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

on a toujours besoin de penser à ce que vous avez besoin de:

avant de dire "Personne n'écrirait le code comme celui ci-dessous" allez vérifier les 10 premières questions ici ...

voici quelques exemples courants que je vois toutes les dix minutes.

vouloir une condition réutilisable

if(condition=='true'){
 var isTrue=true;
}else{
 var isTrue=false;
}
//same as
var isTrue=!!condition

Alerte oui seulement s'il 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

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

"1519200920, à l'Étage un certain nombre de

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

try catch

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 lente lire cette 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 beaux articles / sites que j'ai trouvé sur 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 ya aussi de nombreux sites jsperf montrant la performance de shorthand & bitwsie si vous recherchez avec votre moteur de recherche préféré.

je pourrais aller pendant des heures.. mais je pense que c'est assez pour l'instant.

si vous avez des questions n'hésitez pas.

Et rappelez-vous

aucun mineur ne peut compresser correctement un mauvais code.

vous pouvez utiliser l'un des nombreux mini-filtres javascript disponibles.

• Yui compresseur
• Google closure compiler
• Dean Edwards packer
• JSMin

Google vient de mettre à disposition un compilateur javascript qui peut miniifier votre code, supprimer les branches de code mortes et plus d'optimisations.

google compilateur javascript

concerne

K

avec minifying vous pouvez base64 Encoder aussi. Il rend votre fichier beaucoup plus compressé. Je suis sûr que vous avez vu des 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 comment Miniifier un fichier Javascript?

j'ai récemment eu besoin d'effectuer la même tâche. Alors que les compresseurs listés à le compresseur JavaScript font un excellent travail et l'outil est très utile, les compresseurs ne jouaient pas bien avec un code jQuery que j'utilise ($.getScript et jQuery.fn contrôles). Même le compresseur de fermeture Google s'est étouffé sur les mêmes lignes. Alors que j'aurais pu éventuellement régler les problèmes, il était loin de beaucoup loucher de faire constamment.

celui qui a finalement fonctionné sans problème était UglifyJS (merci @Aries51 ), et la compression était seulement un peu moins que tous les autres. Et similaire à Google, il possède une API HTTP. Packer est aussi très sympa et a la langue mise en œuvre en Perl, PHP, et .NET.

il y a actuellement 2 façons de minifier votre code:

1. vous appliquez des minificateurs à l'arrière de votre application - ici, l'avantage est que vous pouvez appliquer versioning et êtes plus en contrôle de votre code - vous pouvez pratiquement entièrement automatiser le processus de minification et la meilleure pratique serait de l'appliquer avant que votre code soit téléchargé sur le serveur - c'est mieux utilisé lorsque vous avez beaucoup de frontend (à minifier) code Javascript et CSS:

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

de nombreux outils de ce type sont également disponibles pour Node et npm - c'est une bonne pratique d'automatiser la mnification de Javascript avec Grunt.

2. vous pouvez utiliser certains des outils gratuits existants pour la minification qui sont en cours d'exécution en ligne - ceux-ci vous permettent pratiquement de faire la même chose, mais manuellement. Je vous conseillerais de les utiliser lorsque la quantité de votre javascript / css code est plus petit - pas beaucoup de fichiers

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

j'ai écrit un petit script qui appelle une API pour faire miniaturiser votre script, regardez:

#!/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 = ".min.";
    }

    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 [..]