Minify / Compressor Javascript Rekomendasi Google

"Merampingkan atau memperkecil ukuran kode Javascript dapat menghemat banyak bytes data dan mempercepat download, parsing dan waktu eksekusi pada saat halaman blog dibuka". Kalimat tersebut di atas merupakan kutipan yang sempat saya baca di salah satu halaman developer.google.com sebelum saya membuat artikel ini.

Memang banyak cara untuk memperkecil ukuran Javasript code dengan menggunakan pihak ketiga, tetapi yang direkomendasikan oleh google adalah Closure Compiler, JSMin dan YUI Compressor. Berikut kutipan google di salah satu halamannya tentang penjelasan di atas.

"Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Keeping JavaScript code compact has a number of benefits. First, for inline JavaScript and external files that you don't want cached, the smaller file size reduces the network latency incurred each time the page is downloaded. Secondly, minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined. Thirdly, smaller files can be loaded and run more quickly by web browsers.

Several tools are freely available to minify JavaScript, including the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory. We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain).

Source : developers.google.com

Dari uraian di atas menjelaskan bahwa, memperkecil / mengurangi ukuran atau meminimalkan kode javascript serta menghapus yang tidak penting dapat mengurangi latency jaringan yang terjadi setiap kali halaman di-download sehingga halaman dapat dimuat dan berjalan lebih cepat pada browser web.

Karena mengacu kepada compressor javascript yang direkomendasikan oleh google, pada kesempatan kali ini saya akan menjelaskan tentang bagaimana cara memperkecil ukuran javascript dengan menggunakan salah satu dari tiga compressor javasript yang direkomendasikan, yakni Closure Compiler. Perhatikan langkah-langkah berikut ini :

Cara Pertama

• Buka Closure Compiler
• Masukkan link javascript  ke dalam box yang telah disiapkan, kemudian klik add pada samping kanan box. Jika sudah di add, selanjutnya klik "Compile".

 

Klik untuk memperbesar gambar

Contoh link javascript :

https://lostsectorjavascript.googlecode.com/files/accordin-pack.js

Cara Kedua

• Cara ini hampir sama dengan cara pertama, tetapi bedanya yakni pada cara pertama yaitu memasukkan link JS ke dalam box url JS, sedangkan untuk cara yang kedua ini yaitu memasukkan kode JS yang masih mentah (belum diupload ke googlecode.com). Perhatikan gambar untuk lebih jelasnya :

Klik untuk memperbesar gambar

• Setelah langkah-langkah di atas sudah dilakukan, langkah selanjutnya, copy kode  yang ada disamping kanan form Closure Compiler. Pastekan kode tersebut ke dalam notepad dan upload kembali javascript ke google.code.com.

Demikian, artikel singkat tentang Javascript Compressor Rekomendasi Google ini, semoga ada manfaatnya buat anda. Terima kasih, salam Blogger...!!!