Wie 'minify' Javascript-Code

Question

JQuery zwei Versionen zum Download hat, ist man Production (19KB, minimiert und GZip), und der andere ist Entwicklung (120KB, unkomprimierte-Code).

Jetzt die kompakte 19kb-Version, wenn Sie es herunterladen, werden Sie sehen, ist immer noch ein Javascript ausführbaren Code. Wie haben sie es verdichtet? Und wie kann ich meinen Code so "verkleinern"?

Answer 1

Es gibt ein schönes comparison of JavaScript compressors Sie sollten einen Blick auf.

Answer 2

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

• YUI Compressor
• Google closure compiler
• Dean Edwards packer
• JSMin

Answer 3

Google nur zur Verfügung gestellt ein Javascript-Compiler, der Code, elimiated totem Code Filialen und mehr Optimierungen minify können.

google javascript compiler

Grüße
K

Answer 4

Es gibt auch kostenlose Minifier von Microsoft auf Codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

Es ist einfach zu arbeiten und macht einen guten Job.

Gal

Answer 5

ich vor kurzem die gleiche Aufgabe auszuführen benötigt. Während die Kompressoren, die unter The JavaScript CompressorRater aufgelistet sind, eine großartige Arbeit machen und das Werkzeug sehr nützlich ist, haben die Kompressoren mit einigen jQuery-Codes, die ich verwende ($ .getScript und jQuery.fn-Checks), nicht gut gespielt. Sogar die Google Closure Compressor erstickt in den gleichen Zeilen. Während ich die Knirschen irgendwann ausbügeln konnte, war es viel zu oft nötig, ständig zu schielen.

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

Answer 6

DIY Minifizierung

kann keine minifier komprimieren richtig einen schlechten Code.

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

Was sollten Sie tun, bevor Sie

minify Und in Bezug auf jQuery ... Ich benutze keine jQuery.jQuery für alte Browser ist, wurde aus Kompatibilitätsgründen gemacht .. überprüfen 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 sich die Mühe machen, Ihren Code zu komprimieren, wenn Ihre Kunden das 100kb jquery-Skript jedes Mal herunterladen müssen - wie groß ist Ihr unkomprimierter Code? 5-6kb ..? Nicht über die vielen Plugins zu sprechen, die du hinzufügst, um es einfacher zu machen.

Originalcode

Wenn Sie eine Funktion schreiben Sie eine Idee haben, beginnen Sachen zu schreiben, und manchmal am Ende mit so etwas wie die folgenden code.The Code bis works.Now die meisten Leute aufhören zu denken, und fügen Sie dies zu einem Minifier und veröffentlichen Sie es.

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 iss der minified Code (i die neuen Zeilen hinzugefügt)

minimierte 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 jene, Vars, ifs, Schleifen & Definitionen notwendig?

Die meiste Zeit NO! Entfernen

1. nicht erforderlich, wenn, schleife, var
2. eine Kopie des Original-Code halten
3. Verwenden Sie die minifier

OPTIONAL (erhöht die Leistung & kürzere Code)

1. verwenden Sie Shorthand-Operatoren
2. Verwendung Bitoperatoren (nicht verwenden Math)
3. verwenden a, b, c ... für Ihre Temp Vars
4. die alte Syntax (while, for ... nicht forEach)
5. verwenden die Funktionsargumente als Platzhalter (in einigen Fällen)
6. entfernen unnötigen "{}","()",";",spaces,newlines
7. Verwenden Sie die minifier

nun ein minifier c und komprimiere den Code, den du falsch machst.

Kein Minifier kann einen fehlerhaften Code korrekt komprimieren.

DIY

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

Es tut genau das gleiche wie die oben genannten Codes.

Leistung

http://jsperf.com/diyminify

Sie müssen immer denken, was Sie brauchen:

Bevor Sie sagen "Noone Code wie das schreiben würde unten" gehen und überprüfen Sie die erste 10 Fragen hier ...

Hier sind einige commo n Beispiele sehe ich alle zehn Minuten.

Möchten Sie eine wiederverwendbare Zustand

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

Alarm ja nur, wenn es vorhanden ist

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 einer Zahl in einen String oder viceversa

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 Reihe

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

Boden eine Reihe

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

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

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 indexOf ist 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 schöne Artikel/sites fand ich über bitweise/Kurzschrift:

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 Websites, die Leistung der Kurz & bitwsie zeigt, wenn Sie mit Ihrem Lieblings-Suchmaschine suchen.

Ich könnte eine Stunde gehen .. aber ich denke, es ist genug für jetzt.

Wenn Sie einige Fragen haben, fragen Sie einfach.

Und denken Sie daran

Kein minifier kann einen schlechten Code richtig komprimieren.

Answer 7

Zusammen mit der Minimierung können Sie Base64 auch codieren. Es macht Ihre Datei viel komprimierter. Ich bin sicher, dass Sie js-Dateien gesehen haben, die in eine eval() -Funktion mit übergebenen Parametern (p, a, c, k, e, r) eingeschlossen sind. Ich las es in diesem Artikel How to Minify a Javascript File?

Answer 8

Es gibt derzeit zwei Möglichkeiten der minifying Code:

1. Sie minifiers im Backend Seite Ihrer Anwendung gelten - hier der Vorteil, dass Sie die Versionierung anwenden können und mehr sind In der Kontrolle Ihres Codes - Sie können den Prozess der Minification praktisch vollständig automatisieren, und die beste Praxis wäre, sie anzuwenden, bevor Ihr Code auf den Server hochgeladen wird - dies wird am besten verwendet, wenn Sie eine Menge Frontend (zu minimieren) Javascript und CSS-Code:

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

Viele dieser Tools sind auch für Node und Npm verfügbar - es ist eine gute Methode, die Multiplikation von Javascript mit Grunt zu automatisieren.

2. Sie können einige der vorhandenen kostenlosen Tools für die Vereinheitlichung verwenden, die online ausgeführt werden - dies ermöglicht Ihnen praktisch dasselbe, aber manuell durchzuführen. Ich würde empfehlen Ihnen, sie zu benutzen, wenn die Menge des Javascript/CSS-Code ist kleiner - nicht viele Dateien

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

Answer 9

ich ein kleines Skript geschrieben haben, die eine API Ihr Skript minimierte erhalten Anrufe, Scheck it out:

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

Verbrauch:

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