So minimieren Sie den Javascript-Code

JQuery hat zwei Versionen zum Herunterladen, eine ist Production (19 KB, Minified und Gzipped) und die andere ist Development (120 KB, Uncompressed Code) .

Jetzt ist die kompakte 19-KB-Version, wenn Sie sie herunterladen, immer noch ein ausführbarer Javascript-Code. Wie haben sie es verdichtet? Und wie kann ich meinen Code auch so "minimieren"?

DIY Minifizierung

Kein Minifier kann einen fehlerhaften Code richtig komprimieren.

In diesem Beispiel möchte ich nur zeigen, wie viel ein Minifier tut.

Was Sie tun sollten, bevor Sie minimieren

Und in Bezug auf jQuery ... ich benutze jQuery nicht. JQuery ist für alte Browser, es wurde aus Kompatibilitätsgründen erstellt. Überprüfen Sie caniuse.com, fast alles funktioniert auf jedem Browser (auch ie10 ist jetzt standardisiert), ich denke jetzt ist es Nur hier, um Ihre Webanwendung zu verlangsamen ... Wenn Sie die mögen $(), sollten Sie Ihre eigene einfache Funktion erstellen. Und warum sollten Sie sich die Mühe machen, Ihren Code zu komprimieren, wenn Ihre Clients jedes Mal das 100-KB-Abfrageskript herunterladen müssen? Wie groß ist Ihr unkomprimierter Code? 5-6kb ..? Ganz zu schweigen von den unzähligen Plugins, die Sie hinzufügen, um es einfacher zu machen.

Originalcode

Wenn Sie eine Funktion schreiben, haben Sie eine Idee, beginnen mit dem Schreiben von Dingen und manchmal erhalten Sie so etwas wie den folgenden Code. Der Code funktioniert. Jetzt hören die meisten Leute auf zu denken und fügen ihn einem Minifier hinzu und veröffentlichen ihn.

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

Hier wird der minimierte Code ausgegeben (ich habe die neuen Zeilen hinzugefügt)

Minimiert mit ( 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
}

Aber sind all diese Variablen, Wenns, Schleifen und Definitionen notwendig?

Meistens NEIN !

1. Entfernen Sie unnötige if, loop, var
2. Bewahren Sie eine Kopie Ihres Originalcodes auf
3. Verwenden Sie den Minifier

OPTIONAL (erhöht die Leistung und kürzeren Code)

1. Verwenden Sie Kurzzeichenoperatoren
2. benutze bitweise Operatoren (nicht benutzen Math)
3. Verwenden Sie a, b, c ... für Ihre temporären Variablen
4. benutze die alte Syntax ( while, for... nicht forEach)
5. Verwenden Sie die Funktionsargumente als Platzhalter (in einigen Fällen).
6. unnötig entfernen "{}","()",";",spaces,newlines
7. Verwenden Sie den Minifier

Wenn ein Minifier den Code komprimieren kann, machen Sie es falsch.

Kein Minifier kann einen fehlerhaften Code richtig komprimieren.

DIY

function myFunction(a,b,c){
 for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
 return[b,c]
}

Es macht genau das Gleiche wie die obigen Codes.

Performance

http://jsperf.com/diyminify

Sie müssen immer überlegen, was Sie brauchen:

Bevor Sie sagen "Niemand würde Code wie den folgenden schreiben", lesen Sie die ersten 10 Fragen hier ...

Hier sind einige Beispiele, die ich alle zehn Minuten sehe.

Willst du einen wiederverwendbaren Zustand

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

Ja nur benachrichtigen, wenn es existiert

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

Alarm ja oder nein

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

Konvertieren Sie eine Zahl in eine Zeichenfolge oder umgekehrt

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

Runde eine Zahl

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

Etage eine Nummer

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

Schaltergehäuse

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

versuche es zu fangen

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

mehr wenn

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

aber indexOfist langsam lesen Sie diese https://stackoverflow.com/a/30335438/2450730

Zahlen

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;

Einige nette Artikel / Seiten, die ich über bitweise / Kurzschrift gefunden habe:

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

http://www.140byt.es/

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

Es gibt auch viele jsperf-Sites, die die Leistung von Shorthand & Bitwsie zeigen, wenn Sie mit Ihrer Lieblings-Suchmaschine suchen.

Ich könnte stundenlang eins machen ... aber ich denke, es ist genug für jetzt.

Wenn Sie Fragen haben, fragen Sie einfach.

Und merke dir

Kein Minifier kann einen fehlerhaften Code richtig komprimieren.

Sie können einen der vielen verfügbaren Javascript-Minifier verwenden.

• YUI-Kompressor
• Google Closure Compiler
• Dean Edwards Packer
• JSMin

Google hat gerade einen Javascript-Compiler zur Verfügung gestellt, mit dem Sie Ihren Code minimieren, tote Code-Zweige beseitigen und weitere Optimierungen vornehmen können.

Google Javascript Compiler

Grüße
K.

Neben dem Minimieren können Sie es auch mit base64 codieren. Dadurch wird Ihre Datei viel komprimierter. Ich bin sicher, Sie haben js-Dateien gesehen, die in eine eval () - Funktion mit übergebenen Parametern (p, a, c, k, e, r) eingeschlossen sind. Ich habe es in diesem Artikel gelesen. Wie minimiere ich eine Javascript-Datei?

Ich habe ein winziges Skript geschrieben, das eine API aufruft, um Ihr Skript zu minimieren. Schauen Sie sich das an:

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

Verwendung:

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

Ich musste kürzlich die gleiche Aufgabe ausführen. Während die bei The JavaScript CompressorRater aufgelisteten Kompressoren hervorragende Arbeit leisten und das Tool sehr nützlich ist, spielten die Kompressoren mit dem von mir verwendeten jQuery-Code ($ .getScript- und jQuery.fn-Prüfungen) nicht gut. Sogar der Google Closure Compressor verschluckte sich an denselben Zeilen. Obwohl ich die Knicke irgendwann hätte ausbügeln können, war es viel zu viel Schielen, um es ständig zu tun.

Diejenige , die schließlich ohne Probleme funktionierte, war UglifyJS (danke @ Aries51 ), und die Komprimierung war nur geringfügig geringer als bei allen anderen. Und ähnlich wie Google hat es eine HTTP-API. Packer ist auch nett und hat eine Sprachimplementierung in Perl, PHP und .NET.

Derzeit gibt es zwei Möglichkeiten, Ihren Code zu minimieren:

1. Sie wenden Minifizierer auf der Backend-Seite Ihrer Anwendung an. Hier besteht der Vorteil darin, dass Sie die Versionierung anwenden können und mehr Kontrolle über Ihren Code haben. Sie können den Minimierungsprozess praktisch vollständig automatisieren. Es wird empfohlen, ihn vor dem Code anzuwenden auf den Server hochgeladen - dies wird am besten verwendet, wenn Sie viel Frontend (zu minimieren) Javascript und CSS-Code haben:

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

Viele solcher Tools sind auch für Node und npm verfügbar. Es empfiehlt sich, die Mnification von Javascript mit Grunt zu automatisieren.

2. Sie können einige der vorhandenen kostenlosen Tools zur Minimierung verwenden, die online ausgeführt werden. Mit diesen Tools können Sie praktisch dasselbe tun, jedoch manuell. Ich würde Ihnen raten, sie zu verwenden, wenn die Menge Ihres Javascript / CSS-Codes kleiner ist - nicht viele Dateien

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

Sie können den Javascript-Minifier von ubercompute.com verwenden, um Ihren Code zu minimieren. Er minimiert Ihren Javascript-Code bis zu 75% seiner ursprünglichen Version.