Cara 'memperkecil' kode Javascript

JQuery memiliki dua versi untuk diunduh, satu Produksi (19KB, Minified dan Gzip) , dan yang lainnya Pengembangan (120KB, Kode Tidak Terkompresi) .

Sekarang versi kompak 19kb, jika Anda mendownloadnya, Anda akan melihat kode javascript yang dapat dieksekusi. Bagaimana mereka memadatkannya? Dan bagaimana saya bisa 'mengecilkan' kode saya seperti itu juga?

Minifikasi DIY

Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.

Dalam contoh ini saya hanya ingin menunjukkan seberapa banyak minifier dapat bekerja.

Apa yang harus Anda lakukan sebelum mengecilkan

Dan mengenai jQuery ... saya tidak menggunakan jQuery.jQuery untuk browser lama, itu dibuat untuk alasan kompatibilitas .. periksa caniuse.com, hampir semuanya berfungsi di setiap browser (juga ie10 sudah distandarisasi sekarang), saya rasa sekarang sudah hanya di sini untuk memperlambat aplikasi web Anda ... jika Anda suka, $()Anda harus membuat fungsi sederhana Anda sendiri. Dan mengapa repot-repot mengompres kode Anda jika klien Anda perlu mengunduh skrip jquery 100kb setiap kali? seberapa besar kode Anda yang tidak terkompresi? 5-6kb ..? Belum lagi banyak plugin yang Anda tambahkan untuk membuatnya lebih mudah.

Kode Asli

Ketika Anda menulis fungsi, Anda memiliki ide, mulailah menulis sesuatu dan terkadang Anda berakhir dengan sesuatu seperti kode berikut. Kode berfungsi Sekarang kebanyakan orang berhenti berpikir dan menambahkan ini ke minifier dan menerbitkannya.

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

Ini adalah kode minified (saya menambahkan baris baru)

Diperkecil menggunakan ( 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
}

Tetapi apakah semua vars, if, loop & definisi itu diperlukan?

Sebagian besar waktu TIDAK !

1. Hapus if, loop, var
2. Simpan salinan kode asli Anda
3. Gunakan minifier

OPSIONAL (meningkatkan kinerja & kode yang lebih pendek)

1. gunakan operator steno
2. gunakan operator bitwise (jangan gunakan Math)
3. gunakan a, b, c ... untuk vars temp Anda
4. gunakan sintaks lama ( while, for... tidak forEach)
5. gunakan argumen fungsi sebagai placeholder (dalam beberapa kasus)
6. hapus yang tidak perlu "{}","()",";",spaces,newlines
7. Gunakan minifier

Sekarang jika penambang dapat memampatkan kode Anda melakukannya dengan salah.

Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.

DIY

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

Ini persis sama dengan kode di atas.

Performa

http://jsperf.com/diyminify

Anda selalu perlu memikirkan apa yang Anda butuhkan:

Sebelum Anda mengatakan "Tidak ada yang akan menulis kode seperti di bawah ini" buka dan periksa 10 pertanyaan pertama di sini ...

Berikut beberapa contoh umum yang saya lihat setiap sepuluh menit.

Ingin kondisi yang dapat digunakan kembali

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

Waspada ya hanya jika ada

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

Waspada ya atau tidak

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

Mengonversi angka menjadi string atau sebaliknya

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

Membulatkan angka

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

Memberi nomor lantai

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

kasus saklar

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

coba tangkap

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

lebih jika

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

tapi indexOflambat baca https://stackoverflow.com/a/30335438/2450730 ini

nomor

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;

Beberapa artikel / situs bagus yang saya temukan tentang bitwise / steno:

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

http://www.140byt.es/

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

Ada juga banyak situs jsperf yang menampilkan performa steno & bitwsie jika Anda mencari dengan mesin pencari favorit Anda.

Saya bisa pergi satu jam .. tapi saya pikir itu cukup untuk saat ini.

jika Anda memiliki beberapa pertanyaan, tanyakan saja.

Dan ingatlah

Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.

Anda dapat menggunakan salah satu dari banyak minifier javascript yang tersedia.

• Kompresor YUI
• Kompiler penutupan Google
• Dean Edwards pengepakan
• JSMin

Google baru saja menyediakan kompiler javascript yang dapat mengecilkan kode Anda, menghilangkan cabang kode mati dan lebih banyak pengoptimalan.

kompiler javascript google

Salam
K

Bersamaan dengan mengecilkan Anda dapat menyandikannya juga base64. Itu membuat file Anda jauh lebih terkompresi. Saya yakin Anda telah melihat file js yang dibungkus di dalam fungsi eval () dengan parameter (p, a, c, k, e, r) berlalu. Saya membacanya di artikel ini Bagaimana Cara Meminimalkan File Javascript?

Saya telah menulis skrip kecil yang memanggil API untuk mengecilkan skrip Anda, periksa:

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

Pemakaian:

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

Saya baru-baru ini perlu melakukan tugas yang sama. Sementara kompresor yang terdaftar di The JavaScript CompressorRater melakukan pekerjaan yang baik dan alat ini sangat berguna, kompresor tidak bekerja dengan baik dengan beberapa kode jQuery yang saya gunakan (pemeriksaan $ .getScript dan jQuery.fn). Bahkan Kompresor Penutupan Google tersedak di jalur yang sama. Sementara saya akhirnya bisa menyelesaikan kekusutan, itu terlalu banyak menyipitkan mata untuk dilakukan terus-menerus.

Yang akhirnya bekerja tanpa masalah adalah UglifyJS (terima kasih @ Aries51 ), dan kompresinya hanya sedikit kurang dari yang lainnya. Dan mirip dengan Google, ia memiliki API HTTP. Packer juga bagus dan memiliki implementasi bahasa di Perl, PHP, dan .NET.

Saat ini ada 2 cara untuk meminimalkan kode Anda:

1. Anda menerapkan minifier di sisi backend aplikasi Anda - di sini keuntungannya adalah Anda dapat menerapkan versi dan lebih mengontrol kode Anda - secara praktis Anda dapat sepenuhnya mengotomatiskan proses minifikasi dan praktik terbaiknya adalah menerapkannya sebelum kode Anda diunggah ke server - ini paling baik digunakan ketika Anda memiliki banyak kode Javascript dan CSS frontend (harus diperkecil):

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

Banyak alat seperti itu tersedia untuk Node dan npm juga - praktik yang baik adalah mengotomatiskan mnifikasi Javascript dengan Grunt.

2. Anda dapat menggunakan beberapa alat gratis yang ada untuk minifikasi yang berjalan online - ini secara praktis memungkinkan Anda melakukan hal yang sama, tetapi secara manual. Saya akan menyarankan Anda untuk menggunakannya ketika jumlah kode javascript / css Anda lebih kecil - tidak banyak file

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

Anda dapat menggunakan javascript minifier dari ubercompute.com untuk mengecilkan kode Anda, Ini akan meminimalkan kode javascript Anda hingga 75% dari versi aslinya.