Jak 'Minify' kod Javascript

Question

JQuery ma dwie wersje do pobrania, jeden jest Produkcja (19kB, minified i skompresowany algorytmem gzip), a druga jest Rozwoju (120KB, Code nieskompresowany).

Teraz wersja kompaktowa 19kb, jeśli ją pobrałeś, zobaczysz kod wykonywalny javascript. Jak to skompleksowali? I w jaki sposób mogę "zminimalizować" mój kod?

Answer 1

Jest ładny comparison of JavaScript compressors należy przyjrzeć.

Answer 2

Można użyć jednego z wielu dostępnych miniaturek javascript.

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

Answer 3

Google właśnie udostępnił javascript kompilator, który może minify swój kod, elimiated gałęzie martwe kod i dalsze optymalizacje.

google javascript compiler

Pozdrowienia
K

Answer 4

Istnieje również bezpłatny Minifier od Microsoft na codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

Łatwo jest pracować i dobrze się pracuje.

Gal

Answer 5

Niedawno musiałem wykonać to samo zadanie. Podczas gdy sprężarki wymienione na The JavaScript CompressorRater wykonują świetną robotę, a narzędzie jest bardzo przydatne, kompresory nie grały ładnie z jakimś kodem jQuery, którego używam (kontrole $ .getScript i jQuery.fn). Nawet Google Closure Compressor zakrztusił się na tych samych liniach. Chociaż mogłem w końcu zniwelować te skręty, było to o wiele zbyt mruczące, by robić to ciągle.

Ten, który w końcu zadziałał bez problemu, był UglifyJS (dzięki @Aries51), a kompresja była tylko nieznacznie mniejsza niż wszystkie pozostałe. Podobnie jak Google ma interfejs API HTTP. Packer jest również miły i ma implementację językową w Perlu, PHP i .NET.

Answer 6

DIY minifikacji

Nie minifier można skompresować właściwie zły kod.

W tym przykładzie chcę tylko pokazać, ile minifier ma.

Co należy zrobić przed minify

i dotyczące jQuery ... I nie używać jQuery.jQuery jest dla starych przeglądarek, to było robione ze względu na kompatybilność .. sprawdzić caniuse.com, prawie wszystko działa na wszystkich przeglądarkach (również teraz 10 jest standaryzowany), myślę, że teraz jest to tylko tutaj, aby spowolnić twoją aplikację internetową ...jeśli podoba Ci się $(), powinieneś stworzyć własną, prostą funkcję. A po co kompresować swój kod, jeśli klienci muszą pobierać skrypty jQuery 100kb co jakiś czas? Jak duży jest twój nieskompresowany kod? 5-6kb ..? Nie mówić o tonach wtyczek, które dodajesz, aby ułatwić.

oryginalnego kodu

Kiedy napisać funkcję, masz pomysł, zacznij pisać rzeczy i czasami trzeba skończyć z czymś takim następującego kodu code.The works.Now większość ludzi przestać myśleć i dodać to do minifier i opublikuj go.

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

Tutaj ISS ​​kodu minified (I dodaje nowe linie)

minified użyciu (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 
} 

lecz są wszyscy ci, Vars, IFS, pętle & definicje konieczne?

W większości przypadków NIE!

1. Usuń niepotrzebne, jeśli pętla, var
2. zachować kopię oryginalnego kodu
3. Skorzystaj z minifier

OPCJA (zwiększa wydajność & krótszy kod)

1. użyj skrótów operatorów
2. operatorzy użycie bitowe (nie używać Math)
3. używać a, b, c ... o swoją temp vars
4. używać starej składni (while, for ... nie forEach)
5. użyć argumenty funkcji jako zastępczy (w niektórych przypadkach)
6. usunięcia zbędnych "{}","()",";",spaces,newlines
7. Użyj minifier

teraz jeśli minifier c skompresuj kod, robiąc to źle.

Żaden minifier nie może poprawnie skompresować złego kodu.

DIY

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

Robi dokładnie to samo, co wyżej kodów.

Wydajność

http://jsperf.com/diyminify

Zawsze trzeba myśleć, co trzeba:

Zanim powiesz „Nikt nie będzie napisać kod jak poniżej” idź i sprawdź pierwszy 10 pytań tutaj ...

Oto niektóre commo Na przykład widzę co dziesięć minut.

Chcesz warunek wielokrotnego użytku

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

Alert tak tylko wtedy, gdy istnieje

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 

Alert tak lub nie

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 

Konwersja liczby na łańcuch lub na odwrót

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 

zaokrąglić liczbę

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

Floor szereg

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

przełącznik przypadek

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

więcej jeśli

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

ale indexOf jest powolny przeczytać ten https://stackoverflow.com/a/30335438/2450730

numery

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; 

kilka przyjemnych artykułów/stron znalazłem o mnożenie/skrót:

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

http://www.140byt.es/

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

Istnieje również wiele stron jsperf pokazujące działanie skróconej & bitwsie jeśli szukać ty ze swoim ulubionym wyszukiwarką.

Mogę iść jeden godzinami ... ale myślę, że to wystarczy na teraz.

jeśli masz jakieś pytania, po prostu zapytaj.

I pamiętaj

Nie minifier można skompresować właściwie zły kod.

Answer 7

Wraz ze zminimalizowaniem można również kodować base64. Dzięki temu twój plik jest znacznie bardziej skompresowany. Jestem pewien, że widzieliście pliki js zapakowane wewnątrz funkcji eval() z parametrami (p, a, c, k, e, r) przekazanymi. Czytałem go w tym artykule How to Minify a Javascript File?

Answer 8

Obecnie 2 sposoby minifying kod:

1. zastosować minifiers po stronie zaplecza swojej aplikacji - w tym przypadku zaletą jest to, że można zastosować wersjonowanie i są bardziej kontrolując swój kod - możesz praktycznie w pełni zautomatyzować proces zminimalizowania, a najlepszą praktyką byłoby zastosowanie go przed przesłaniem kodu na serwer - najlepiej użyć go, gdy masz dużo frontendu (do zminimalizowania) Javascript i Kod CSS:

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

Wiele takich narzędzi jest dostępnych również dla Node i npm - dobrą praktyką jest zautomatyzowanie unieważniania Javascriptu za pomocą Grunta.

2. możesz użyć niektórych z istniejących darmowych narzędzi do minifikacji, które są uruchomione online - to praktycznie pozwala ci zrobić to samo, ale ręcznie. Chciałbym porad można z nich korzystać, gdy ilość JavaScript/kodu CSS jest mniejszy - nie wiele plików

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

Answer 9

pisałem mały skrypt, który wywołuje API, aby uzyskać skrypt minified, check 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; 
    } 
} 

Zastosowanie:

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