Cara Kompres File Javascript Dengan Closure Compiler – Google

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

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

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

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

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

java -jar compiler.jar --help