Javascript kodu nasıl 'küçültülür'

100

JQuery'nin indirilebilecek iki sürümü vardır, biri Üretim (19KB, Küçültülmüş ve Gzipli) ve diğeri Geliştirme (120KB, Sıkıştırılmamış Kod) .

Şimdi kompakt 19kb sürümünü indirirseniz, hala bir javascript çalıştırılabilir kodu göreceksiniz. Nasıl sıkıştırdılar? Ve kodumu bu şekilde nasıl 'küçültebilirim'?

javascript  gzip 
— KalEl
kaynak
1
Özellikle bunu yapmama izin veren herhangi bir çevrimiçi yardımcı program var mı?
— KalEl
2
Bu eski gönderiye aynı sorularla rastladım, çok güzel soru! Bazı iyi temel bilgiler: thiscouldbeuseful.com/2012/09/minified-js-for-beginners.html .
— Aries51

Yanıtlar:

49

DIY Minyatür

Hiçbir minifier, kötü bir kodu düzgün şekilde sıkıştıramaz.

Bu örnekte bir minifier'in ne kadar yaptığını göstermek istiyorum.

Küçültmeden önce ne yapmalısınız?

Ve jQuery ile ilgili olarak ... jQuery kullanmıyorum. JQuery eski tarayıcılar içindir, uyumluluk nedeniyle yapılmıştır .. caniuse.com'u kontrol edin, hemen hemen her şey her tarayıcıda çalışıyor (ayrıca ie10 artık standartlaştırılmıştır), sanırım şimdi sadece web uygulamanızı yavaşlatmak için burada ... isterseniz $()kendi basit işlevinizi oluşturmalısınız. Ve müşterilerinizin her seferinde 100kb jquery betiğini indirmesi gerekiyorsa, neden kodunuzu sıkıştırmaya zahmet etmelisiniz? sıkıştırılmamış kodunuz ne kadar büyük? 5-6kb ..? Daha kolay hale getirmek için eklediğiniz tonlarca eklentiden bahsetmeyin.

Orijinal Kod

Bir işlevi yazdığınızda bir fikriniz olur, bir şeyler yazmaya başlarsınız ve bazen aşağıdaki kod gibi bir şey elde edersiniz: Kod çalışır.Artık çoğu insan düşünmeyi bırakıp bunu bir minifier'a ekleyip yayınlar.

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

İşte küçültülmüş kod (yeni satırları ekledim)

Kullanılarak minified ( 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
}

Ancak tüm bu değişkenler, eğerler, döngüler ve tanımlar gerekli midir?

Çoğu zaman HAYIR !

  1. Gereksiz if, loop, var kaldır
  2. Orijinal kodunuzun bir kopyasını saklayın
  3. Minifier'ı kullanın

İSTEĞE BAĞLI (performansı artırır ve kodu kısaltır)

  1. steno operatörleri kullanın
  2. bitsel operatörler kullanın (kullanmayın Math)
  3. geçici değişkenleriniz için a, b, c ... kullanın
  4. eski sözdizimini kullan ( while, for... değil forEach)
  5. işlev bağımsız değişkenlerini yer tutucu olarak kullanın (bazı durumlarda)
  6. gereksiz olanı kaldırmak "{}","()",";",spaces,newlines
  7. Minifier'ı kullanın

Şimdi bir minifier kodu sıkıştırabilirse, yanlış yaparsınız.

Hiçbir minifier, kötü bir kodu düzgün şekilde sıkıştıramaz.

DIY

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

Yukarıdaki kodlarla tam olarak aynı şeyi yapar.

Verim

http://jsperf.com/diyminify

Her zaman neye ihtiyacınız olduğunu düşünmeniz gerekir:

"Kimse aşağıdaki gibi kod yazmaz" demeden önce gidip buradaki ilk 10 soruyu kontrol edin ...

İşte her on dakikada bir gördüğüm bazı yaygın örnekler.

Yeniden kullanılabilir bir koşul ister

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

Evet, yalnızca varsa uyar

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

Evet veya hayır uyarısı

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

Bir sayıyı dizeye veya tersine dönüştürme

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

Bir sayı yuvarlayın

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

Bir sayı tabanı

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

yer değiştir

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

yakalamaya çalış

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

daha fazla eğer

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

ama indexOfyavaş bu https://stackoverflow.com/a/30335438/2450730 okuyun

sayılar 

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;

Bitsel / steno hakkında bulduğum bazı güzel makaleler / siteler:

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

http://www.140byt.es/

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

En sevdiğiniz arama motoruyla arama yaparsanız, steno ve bitwsie'nin performansını gösteren birçok jsperf sitesi de vardır.

Saatlerce gidebilirim .. ama şimdilik yeterli olduğunu düşünüyorum.

eğer bazı sorularınız varsa sadece sorun.

Ve Hatırla

Hiçbir minifier, kötü bir kodu düzgün şekilde sıkıştıramaz.

— koko
kaynak
30
Kodu elle küçültmek için neredeyse hiçbir neden yoktur. Diğer geliştiriciler (veya 10 ay sonra sizin) tarafından kolayca anlaşılabilecek bir kod yazın. Evet, ne kadar basit olursa o kadar iyidir. Orijinali koruyan otomatik bir derleme sürecinde küçültülmüş bir kullanın. Neredeyse her durumda, el optimizasyonundan elde edilen herhangi bir hız kazanımı, geliştiricilerin küçültülmüş kodu deşifre etme maliyetinden çok daha ağır basıyor.
— alttag
4
ne yaptığına bağlı. animasyonlar / tuval ile çalışıyorsanız, örneğin büyük veri kümeleri ve dosya manipolasyonu, özellikle mobil cihazlarda hızlı bir kod çok önemli ... mesele şu ki, bazı geliştiriciler için okuması zor. evet ... ben kod yazıyorum çünkü Pentium 2 .. yani muhtemelen 1998, kodu okuyabiliyorum ve deneyimlerime göre hataları kontrol etmek için daha az kodum var. Ve hız hakkında .. mh, senin hatan. Karmaşık işlevlerde bitsel / ve kısaltma kullanarak performans artışı çılgınca. Özellikle çeşitli cihazlarda / tarayıcılarda test etmek. Google kısaltılmış javascript'i kullanın ve birçok örnek bulacaksınız
— cocco
Yuvarlama örneğinize bakın: (10.4899845 +.5)|011 yerine 10 ile sonuçlanır
— DanMan
DIY kodu "fazla optimize edilmiş" dosyama eklendi. Sıfırdan küçük bir değer (myNumber veya a) sağlandığında orijinal kodun yaptığını tam olarak YAPMAZ. Orijinal kod bir istisna atar ve "geliştirilmiş" kod sonsuz bir döngüye girer.
— Donald Zengin
— Desteklenebilirlik
10

Google, kodunuzu küçültebilen, ölü kod dallarını ortadan kaldıran ve daha fazla optimizasyon yapabilen bir javascript derleyicisi sundu.

google javascript derleyici

Saygılarımızla
K

— Khb
kaynak
3

Küçültmenin yanı sıra base64 kodlamayı da yapabilirsiniz. Dosyanızı çok daha sıkıştırılmış hale getirir. Eminim bir eval () işlevi içinde parametreler (p, a, c, k, e, r) geçirilmiş js dosyaları görmüşsünüzdür. Bu yazıda okudum Javascript Dosyası Nasıl Küçültülür?

— Varg
kaynak
base64 kodlama kodunuzu sıkıştırmaz, tam tersini yapar, daha fazla karakter elde edersiniz. LZH Dizenizi
— beliha
3

Komut dosyanızı küçültmek için bir API çağıran küçük bir komut dosyası yazdım, kontrol edin:

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

Kullanım:

./minifier.pl a.js c.css b.js cc.css t.js j.js [..]
— Pradeep
kaynak
1

Geçenlerde aynı görevi yerine getirmem gerekiyordu. JavaScript CompressorRater'da listelenen kompresörler harika bir iş çıkarırken ve araç çok kullanışlı olsa da, kullandığım bazı jQuery kodlarıyla ($ .getScript ve jQuery.fn kontrolleri) kompresörler iyi çalışmıyordu. Google Kapatma Kompresörü bile aynı hatlarda tıkandı. Sonunda kıvrımları düzeltebilirdim, ancak sürekli yapmak çok fazla gözlerini kıstı.

Sonunda sorunsuz çalışan UglifyJS idi (teşekkürler @ Aries51 ) ve sıkıştırma diğerlerinden yalnızca biraz daha azdı. Ve Google'a benzer şekilde bir HTTP API'ye sahiptir. Packer da güzeldir ve Perl, PHP ve .NET'te dil uygulamasına sahiptir.

— Wayne Weibel
kaynak
1

Şu anda kodunuzu küçültmenin 2 yolu vardır:

  1. uygulamanızın arka uç tarafına küçültme uygulayıcıları uygularsınız - burada avantaj, sürüm oluşturmayı uygulayabilmeniz ve kodunuzu daha fazla kontrol edebilmenizdir - küçültme sürecini pratik olarak tamamen otomatikleştirebilirsiniz ve en iyi uygulama, bunu kodunuz olmadan önce uygulamak olacaktır. sunucuya yüklendi - bu en iyi şekilde çok sayıda ön uç (küçültülecek) Javascript ve CSS kodunuz olduğunda kullanılır:

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

Bu tür araçların çoğu Düğüm ve npm için de mevcuttur - Javascript'in Grunt ile birleştirilmesini otomatikleştirmek iyi bir uygulamadır.

  1. Çevrimiçi çalışan küçültme için mevcut bazı ücretsiz araçları kullanabilirsiniz - bunlar pratik olarak aynısını, ancak manuel olarak yapmanıza izin verir. Bunları javascript / css kodunuzun miktarı daha küçük olduğunda kullanmanızı tavsiye ederim - çok fazla dosya değil

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

— peterBlue
kaynak
0

VSCode düzenleyiciyi kullanıyorsanız, birçok eklenti / uzantı mevcuttur.

MinifyAllBirçok uzantılı uyumlu - örneğin çok iyi biridir.

Kurun ve VSCode'u yeniden yükleyin. Ardından dosyanıza tıklayın, komut paletini açın ( Ctrl+Shift+p), karınca türü bu belgeyi küçültün ( Ctrl+alt+m) oradaki diğer mevcut seçenekler de orijinal belgeyi koru vb. Kolay!

— DAVID AJAYI
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.