Comment `` minifier '' le code Javascript


99

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?


1
Surtout, existe-t-il un utilitaire en ligne qui me permet de le faire?
KalEl

2
Je suis tombé sur ce vieux post avec les mêmes questions, donc bonne question! Quelques bonnes informations de base: thiscouldbeuseful.com/2012/09/minified-js-for-beginners.html .
Aries51

Réponses:


48

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.


30
Il n'y a pratiquement aucune raison de réduire manuellement le code. Écrivez un code facilement compréhensible par les autres développeurs (ou par vous, 10 mois plus tard). Oui, le plus simple est le mieux. Utilisez un minifié dans un processus de construction automatisé qui préserve l'original. Dans presque tous les cas, les gains de vitesse résultant de l'optimisation manuelle sont largement compensés par le coût des développeurs pour déchiffrer le code minifié.
alttag

4
dépend de ce que vous faites. si vous travaillez avec des animations / canevas, d'énormes ensembles de données et la manipulation de fichiers par exemple, un code rapide est très important, en particulier sur les appareils mobiles ... le fait est que pour certains développeurs, c'est difficile à lire.ouais ... j'écris du code depuis le pentium 2 .. donc probablement 1998, je peux lire le code et d'après mon expérience j'ai moins de code pour vérifier les erreurs. Et à propos de la vitesse .. mh, votre tort. L'augmentation des performances à l'aide de bits / et de raccourcis dans des fonctions complexes est insensée. En particulier, les tests sur divers appareils / navigateurs.Utilisez Google javascript en raccourci et vous trouverez de nombreux exemples
cocco

Re votre exemple d'arrondi: (10.4899845 +.5)|0donne 10 au lieu de 11.
DanMan

Le code DIY vient d'être ajouté à mon fichier "suroptimisé". Il ne fait PAS exactement ce que fait le code d'origine lorsqu'une valeur inférieure à zéro est fournie (myNumber ou a). Le code d'origine lève une exception et le code "amélioré" entre dans une boucle infinie.
Donald Rich

Cela ressemble à un si mauvais conseil du point de vue de la prise en charge
donkz


10

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


3

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?


l'encode base64 ne compresse pas votre code, il fait exactement le contraire, vous vous retrouvez avec plus de caractères. Vous pouvez LZH Compresser votre chaîne, quelqu'un a créé un script JS sur github qui effectue une compression LZH sur des chaînes nommées: lz-string, vous pouvez l'utiliser pour compresser votre code: pieroxy.net/blog/pages/lz-string/index.html
beliha

3

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

1

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.


1

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.

  1. 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/


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.