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!
OPTIONNEL (augmente les performances et un code plus court)
Math
)while
, for
... pas forEach
)"{}","()",";",spaces,newlines
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:
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.