Comment "minifier" le code Javascript
JQuery a deux versions à télécharger, l’une est Production (19Ko, 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, reste un code javascript exécutable. Comment l'ont-ils compacté? Et comment puis-je "minifier" mon code comme ça aussi?
Vous devriez jeter un coup d’œil à la comparaison _ de Nice des compresseurs JavaScript .
DIY Minification
Aucun minifier ne peut compresser correctement un code incorrect.
Dans cet exemple, je veux juste montrer à quel point une minifier fait.
Ce que vous devriez faire avant de minifier
Et en ce qui concerne jQuery ... je n'utilise pas jQuery.jQuery est destiné aux anciens navigateurs, il a été conçu pour des raisons de compatibilité .. consultez caniuse.com, presque tout fonctionne sur tous les navigateurs (ie10 est normalisé maintenant), je pense que maintenant il est juste là pour ralentir votre application Web ... si vous aimez la $(), vous devez créer votre propre fonction simple. Et pourquoi se donner la peine de compresser votre code si vos clients ont besoin de télécharger le script jquery de 100 Ko à tout moment? Quelle est la taille de votre code non compressé? 5-6kb ..? Sans parler des tonnes de plugins que vous ajoutez pour faciliter les choses.
Code d'origine
Quand vous écrivez une fonction, vous avez une idée, commencez à écrire des choses et parfois vous vous retrouvez avec le code suivant. Le code fonctionne. Maintenant, la plupart des gens arrêtent de penser et ajoutent cela à 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)
Minified using ( 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, si, boucles et définitions sont nécessaires?
La plupart du temps NON!
- Supprimer inutiles if, loop, var
- Conservez une copie de votre code original
- Utilisez le minifier
OPTIONNEL (augmente les performances et un code plus court)
- utiliser des opérateurs de sténographie
- utiliser des opérateurs au niveau du bit (ne pas utiliser
Math) - utilisez a, b, c ... pour vos vars temporaires
- utiliser l'ancienne syntaxe (
while,for... pasforEach) - utiliser les arguments de la fonction comme espace réservé (dans certains cas)
- supprimer les inutiles
"{}","()",";",spaces,newlines - Utilisez le minifier
Maintenant, si un minificateur peut compresser le code, vous vous trompez.
Aucun minifier ne peut compresser correctement un code incorrect.
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
Vous devez toujours penser à ce dont vous avez besoin:
Avant de dire "Personne n'écrira du 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.
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
Autour d'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 nombre
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
boîtier de commutation
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 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 lent à lire ceci https://stackoverflow.com/a/30335438/24507
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 articles/sites de Nice que j'ai trouvés à propos de bitwise/sténographie:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Il existe également de nombreux sites jsperf montrant les performances de sténographie et de bitwsie si vous effectuez une recherche avec votre moteur de recherche préféré.
Je pourrais y aller pendant des heures .. mais je pense que ça suffit pour le moment.
si vous avez des questions, il suffit de demander.
Et rappelez-vous
Aucun minifier ne peut compresser correctement un code incorrect.
Vous pouvez utiliser l'un des nombreux minificateurs javascript disponibles.
Google vient de mettre à disposition un compilateur javascript capable de réduire le code, d'éliminer les branches de code mort et d'autres optimisations.
Cordialement
K
En plus de la minification, vous pouvez aussi l’encoder en base64. Cela rend votre fichier beaucoup plus compressé. Je suis sûr que vous avez vu des fichiers js intégrés à une fonction eval () avec des paramètres (p, a, c, k, e, r) passés. Je l'ai lu dans cet article Comment réduire un fichier Javascript?
J'ai récemment eu besoin d'effectuer la même tâche. Alors que les compresseurs listés à JavaScript CompressorRater font un excellent travail et que l’outil est très utile, ils 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. Bien que j'aurais pu éventuellement régler les problèmes, c'était beaucoup trop difficile à faire pour plisser les yeux.
Celui qui a finalement fonctionné sans problème était UglifyJS (merci @ Aries51 ), et la compression n’était que légèrement inférieure à celle de tous les autres. Et semblable à Google, il a une API HTTP. Packer est également Nice et implémente des langages en Perl, PHP et .NET.
J'ai écrit un petit script qui appelle une API pour obtenir votre script minifié, consultez-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 [..]
Il y a actuellement 2 façons de minifier votre code:
- vous appliquez des minificateurs sur le côté arrière de votre application - l'avantage réside dans le fait que vous pouvez appliquer le versioning et maîtriser davantage votre code - vous pouvez pratiquement automatiser entièrement le processus de minification et la meilleure pratique consiste à l'appliquer avant que votre code soit téléchargé sur le serveur - il est préférable de l'utiliser lorsque vous avez beaucoup de code Javascript et CSS (à minifier):
http://yui.github.io/yuicompressor/
De nombreux outils de ce type sont également disponibles pour Node et npm - il est judicieux d'automatiser la mnification de Javascript avec Grunt.
- vous pouvez utiliser certains des outils gratuits existants pour la minification qui fonctionnent en ligne - ils vous permettent pratiquement de faire de même, mais manuellement. Je vous conseillerais de les utiliser lorsque la quantité de votre code javascript/css est plus petite - peu de fichiers