ffMozilla/5.0 (compatible; DotBot/1.1; http://www.opensiteexplorer.org/dotbot, help@moz.com)
NEW!! Buku Query MySQL Lihat Detail » x

Cara Kompres File Javascript Dengan Closure Compiler – Google

Setelah sebelumnya kita membahas cara kompres file javascript dengan YUICompressor, pada kesempatan ini kita akan membahas cara kompres file javascript dengan closure compiler.

Compressor ini merupakan salah satu yang terbaik karena aktif dikembangkan dan pengembangnya adalah sang raksasa Google.

Daftar Isi:

  1. Kompres File Javascript Dengan Closure Compiler
  2. Kompres Banyak File Javascript Tanpa Menggabungkannya
  3. Gabung dan Kompres File Javascript
  4. Peringatan Penting
  5. Buat otomatis

I. Install Java Runtime Environment

Untuk dapat menggunakan closure compiler, kita harus menginstall Java Runtime Environment (JRE) versi 7 keatas.

Untuk memastikan apakah JRE sudah terinstall di sistem kita dan sekaligus mengecek apakah versi yang terinstall adalah versi 7 keatas, buka command prompt dan java --version

Jika windows tidak mengenali command tersebut atau versi JRE masih dibawah 7, maka kita perlu menginstallnya.

Cek Versi JRE

pada contoh diatas versi yang terinstall adalah versi 8 (1.8)

Untuk mendownload JRE, silakan langsung mengunjungi halaman Java SE – Download kemudian cari Link JRE Download kemudian klik tombol download

Pada halaman berikutnya klik “Accept license Agreement” dan pilih file instalasi (.exe) yang ingin didownload. JIKA Anda menggunakan windows 64 bit, tidak masalah jika menginstall versi 32 bit.

II. Download Closure Compiler (file .jar)

Selanjutnya kita perlu mendownload file closure compiler, Anda tidak perlu mendownload repo dari Github, karena disana semuanya berisi tentang source code, bukan file .jar (Java Archive) yang kita butuhkan, silakan download langsung dari Google melalui link: compiler-latest.zip

Didalam file tersebut terdapat file compiler.jar yang akan kita gunakan nanti.

III. Kompres File Javascript Dengan Closure Compiler

Selanjutnya mari kita bahas mengenai cara kompres file javascript dengan closure compiler, langkah yang diperlukan adalah:

  1. Pertama mari kita buat direktori kerja dimana kita akan menempatkan semua file yang akan kita gunakan, misal kita buat direktori compress pada drive E.
  2. Selanjutnya ekstrak file compiler.jar yang ada di compiler-lastest.zip ke direktori compress, disamping itu juga copy file javascript yang akan kita kompres ke direktori tersebut, misal kita akan menggunakan file jquery-1.12.4.js
  3. Buka command prompt dan arahkan cursor ke direktori yang telah kita buat tadi, kemudian jalankan perintah java -jar path/to/compiler.jar --js path/to/source/file --js_output_file path/to/output pada contoh kali ini kita akan menjalankan perintah java -jar compiler.jar --js jquery-1.12.4.js --js_output_file jquery-1.12.4_min.js

    Cara Kompres File Javascript Dengan Closure Compiler - Command Promt

    Hasil yang kita peroleh adalah:

    Hasil Kompres File Javascript Dengan Closure Compiler Standard

    Ukuran file berkurang sekitar 61,32%.

  4. Untuk kompresi maksimal gunakan opsi --compilation_level ADVANCED_OPTIMIZATIONS, kita ubah perintahnya menjadi:
    java -jar compiler.jar --js jquery-1.12.4.js --compilation_level ADVANCED_OPTIMIZATIONS --js_output_file jquery-1.12.4_min.js

    Maka hasi yang kita peroleh adalah:

    Hasil Kompresi Closure Compiler Mode Advanced

    Dengan mode Advanced, file berkurang hingga 69%, NAMUN penting untuk diketahui bahwa mode ini tidak aman, dan pada contoh diatas, file jquery yang dihasilkan ERROR, pembahasannya ada di bagian bawah.

Sekilas tentang warning

Ketika mengkompres file jquery, ada 12 warning yang muncul, apa maksudnya?

Secara default, closure compiler akan memberikan warning ketika ada hal hal diluar kebiasaan, yang sering muncul adalah peringatan adanya Supicious code, maksud dari warning ini adalah, ada code yang tidak memberikan efek apa-apa, sehingga sebenarnya tidak perlu ditulis.

Contoh:

$(document).ready(function()
{
	$('label').click(function(){
		$('#' + $(this).attr('for').checked = true;
	})
})

kode $('#' + $(this).attr('for').checked = true; tidak berpengaruh karena ketika label di klik, maka checkbok tetap akan "checked" ada atau tidak perintah dari javascript.

Level kompresi

Closure compiler menyediakan dua macam level kompresi yaitu SIMPLE_OPTIMIZATION dan ADVANCED_OPTIMIZATION perbedaan keduanya dapat langsung dilihat disini

Secara singkat, perbedaannya adalah: simple hanya akan memperpendek item tertentu saja seperti argumen pada fungsi, statement true menjadi !0, dll, namun pada kondisi tertentu tidak merubah nama variabel.

Sedangkan untuk advanced, closure compiler akan benar benar (jika diperlukan) menata ulang struktur kode kita sehingga benar-benar menjadi compact.

III. Penting...

Penting diperhatikan bahwa ketika menggunakan ADVANCED_OPTIMIZATION closure compiler memiliki "rule" yang penting untuk diketahui yang  bisa jadi akan membuat kode javascript anda menjadi error:

  1. Closure compiler akan menghapus fungsi yang tidak digunakan, sehingga jika anda mengkompres file javascript yang berisi fungsi-fungsi yang akan digunakan pada file javascript lain, maka bisa dipastikan akan dihapus, karena closure compiler akan menganggapnya tidak dipakai, meskipun sebenarnya dipakai di file / script lain, hal ini juga terjadi pada file jquery yang kita kompres tadi.
  2. Penulisan kode harus diperhatikan baik baik, karena penulisan objek property yang tidak konsisten akan membuat hasil kompresi menjadi eror, misal: di satu tempat kita menuliskan: toko['lokasi'] sedangkan ditempat lain menuliskan toko.lokasi

Untuk lebih lengkapnya silakan kunjungi halaman: Advanced Compilation and Extern

Dari karakteristik diatas, mode yang paling aman adalah mode simple, namun hasil kompresi tidak maksimal. Jika tetap ingin menggunakan mode advanced, pastikan semua syarat terpenuhi, diantaranya file-file yang mengandung fungsi terkait digabung menjadi satu.

Disamping itu perlu untuk diketahui bahwa secara default closure compiler akan menambahkan line break pada setiap 500 huruf dengan alasan terkadang firewall dan proxy memblok file javascript dengan baris yang sangat panjang.

IV. Kompres Banyak File Javascript Dengan Closure Compiler

Untuk mengkompres banyak file namun tanpa menggabungkannya, kita tidak dapat langsung menggunakan closure compiler, kita perlu sedikit tambahan command untuk membaca file javascript yang ada kemudian baru mengkompresnya.

Misal kali ini kita akan mengkompres file data.js, main.js, dan shared.js, perintah yang akan kita gunakan adalah sebagai berikut:

for %f in (data.js main.js shared.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %f --js_output_file %~nf.min.js

atau jika ingin mengkompres semua file javascript:

for %f in (*.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %f --js_output_file %~nf.min.js

perintah tersebut akan mencari file berekstensi .js dan menjalankan closure compiler untuk mengkompresnya dengan nama output file: nama file awal ( %~nf ) ditambah .min.js

Hasil yang kita peroleh adalah sebagai berikut:

Hasil Kompres Banyak File Javascript Dengan Closure Compiler

V. Menggabungkan dan Mengkompres File Javascript Dengan Closure Compiler

Selanjutnya terkadang kita terlebih dahulu ingin menggabungkan beberapa file javascript baru kemudian mengkompresnya, hal ini dapat langsung kita lakukan melalui perintah pada closure compiler.

Melanjutkan contoh sebelumnya, kita gabungkan file data.js, main.js, dan shared.js, kemudian mengkompresnya, perintah yang kita gunakan:

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js data.js --js main.js --js shared.js --js_output_file merged.min.js

atau jika ingin menggabungkan semua file javasript:

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS *.js --js_output_file merged.min.js

Hal ini berbeda dengan YUICompressor, dimana kita terlebih dahulu menggabungkan secara manual yang berpotensi terjadi error, pada closure compiler, penggabungan dilakukan secara otomatis dan otomatis memperbaiki error yang ada, misal kurang tanda ;

Hasil yang kita peroleh adalah:

Gabung dan Kompres Fie Javascript Dengan Closure Compiler

VI. Buat Otomatis

Jika kita sering menjalankan closure compiler dengan command prompt, maka kita perlu untuk membuatnya dapat berjalan otomatis, setidaknya mengurangi rutinitas kita membuka dan menjalankan perintah pada command prompt.

Untuk membuatnya berjalan otomatis, maka kita perlu membuat file .bat, caranya buka text editor, misal notepad kemudian tulis perintah yang ingin kita jalankan, selanjutnya simpan dengan ekstensi .bat, misal: mergeall.bat (pada bagian Save as type: dipilih All Files (*.*)), simpan dengan lokasi yang sama dengan file compiler.js

Misal kita akan otomatis mengkompres setiap file javascript tanpa menggabungkannya, maka kita tulis

for %%f in (*.js) do java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js %%f --js_output_file %%~nf.min.js

Penting: perlu diperhatikan bahwa untuk command bawaan windows, penulisannya agak berbeda, pada file .bat kita menulis %%f dan %%~nf.min.js sedangkan pada command prompt kita menulis %f dan %~nf.min.js

Untuk menjalankannya, dobel klik file .bat tersebut.

Jalankan Closure Compiler Secara Otomatis

Lebih Lanjut

Untuk mengetahui lebih jauh tentang closure compiler, silakan buka halaman resminya: Closure Compiler | Google Developers atau pada command prompt ketikkan perintah:

java -jar compiler.jar --help

Saran

Untuk hasil maksimal, yaitu pada mode ADVANCED, penggunaan closure compiler menjadi rumit dan tidak aman, untuk itu sobat bisa menggunakan alternatif lain seperti UglifyJs atau YUICompressor.

Demikian pembahasan mengenai cara kompres file javascript dengan closure compiler, semoga bermanfaat.

 

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah