Comment `` minifier '' le code Javascript

JQuery a deux versions à télécharger, l'une est Production (19 Ko, Minified et Gzipped) , et l'autre est Development (120 Ko, code non compressé) .

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

Minification de bricolage

Aucun minificateur ne peut compresser correctement un mauvais code.

Dans cet exemple, je veux juste montrer ce que fait un minificateur.

Ce que vous devez faire avant de minifier

Et en ce qui concerne jQuery ... je n'utilise pas jQuery.jQuery est pour les anciens navigateurs, il a été fait pour des raisons de compatibilité .. vérifiez caniuse.com, presque tout fonctionne sur tous les navigateurs (aussi ie10 est normalisé maintenant), 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 jquery de 100 Ko à chaque fois? 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 d'origine

Lorsque vous écrivez une fonction, vous avez une idée, commencez à écrire des choses et parfois vous vous retrouvez avec quelque chose comme le code suivant.Le code fonctionne.Maintenant, la plupart des gens arrêtent de penser et ajoutent ceci à un minifier 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 minifié (j'ai ajouté les nouvelles lignes)

Minifié à 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 les if, loop, var inutiles
2. Conservez une copie de votre code d'origine
3. Utilisez le minificateur

OPTIONNEL (augmente les performances et le code plus court)

1. utiliser des opérateurs de raccourcis
2. utiliser des opérateurs au niveau du bit (ne pas utiliser Math)
3. utilisez a, b, c ... pour vos variables de température
4. utiliser l'ancienne syntaxe ( while, for... pas forEach)
5. utiliser les arguments de la fonction comme espace réservé (dans certains cas)
6. enlever inutile "{}","()",";",spaces,newlines
7. Utilisez le minificateur

Maintenant, si un minificateur peut compresser le code, vous le faites mal.

Aucun minificateur ne peut compresser correctement un mauvais code.

DIY

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

Avant de dire "Personne n'écrirait un code comme celui ci-dessous", vérifiez les 10 premières questions ici ...

Voici quelques exemples courants 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

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

Étage un numéro

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

cas de commutateur

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

essayez d'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 indexOfest lent à lire ceci 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 bons articles / sites que j'ai trouvés à propos du bitwise / shorthand:

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

http://www.140byt.es/

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

Il existe également de nombreux sites jsperf montrant les performances de la sténographie et du bitwsie si vous effectuez une recherche avec votre moteur de recherche préféré.

Je pourrais en faire un pendant des heures ... mais je pense que c'est suffisant pour le moment.

si vous avez des questions, posez-les simplement.

Et rappelez-vous

Aucun minificateur ne peut compresser correctement un mauvais code.

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

• Compresseur YUI
• Compilateur de fermeture Google
• Emballeur Dean Edwards
• JSMin

Google vient de mettre à disposition un compilateur javascript qui peut minimiser votre code, éliminer les branches de code mort et plus d'optimisations.

compilateur javascript google

Cordialement
K

En plus de la minification, vous pouvez également l'encoder en base64. Cela 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 minifier un fichier Javascript?

J'ai écrit un petit script qui appelle une API pour minifier votre script, vérifiez-le:

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

Usage:

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

J'ai récemment eu besoin d'effectuer la même tâche. Alors que les compresseurs répertoriés dans JavaScript CompressorRater font un excellent travail et que l'outil est très utile, les compresseurs ne jouaient pas bien avec le code jQuery que j'utilise (vérifications $ .getScript et jQuery.fn). Même le Google Closure Compressor s'est étouffé sur les mêmes lignes. Alors que j'aurais finalement pu aplanir les problèmes, c'était beaucoup trop compliqué à faire constamment.

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

Il existe actuellement 2 façons de réduire votre code:

1. vous appliquez des minificateurs sur le côté backend de votre application - ici, l'avantage est que vous pouvez appliquer la gestion des versions et que vous maîtrisez mieux 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 - il est préférable de l'utiliser lorsque vous avez beaucoup de code Javascript et CSS frontend (à minifier):

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 qui s'exécutent 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 code javascript / css est plus petite - pas beaucoup de fichiers

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

Vous pouvez utiliser le minificateur javascript de ubercompute.com pour minifier votre code.Il réduira votre code javascript jusqu'à 75% de sa version d'origine.