Design, Tutorial and Tips Trik Blogger | Lostsector

Minify / Compressor Javascript Rekomendasi Google

Posted: 07 Apr 2013 07:44 AM PDT

Javascript Compressor 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 kalimat dari 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.

Nah, 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".

Minify javascript yang direkomendasikan oleh google

memperkecil ukuran javascript rekomendasi oleh google

Klik untuk memperbesar gambar

Contoh link javascript : https://lostsector-javascript.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 :

memperkecil size javascript yang direkomendasikan google

Klik untuk memperbesar gambar

Setelah langkah-langkah di atas sudah dilakukan, langkah selanjutnya, copy kode disamping kanan pada Closure Compiler dan pastekan kode tersebut ke dalam notepad serta upload kembali javascript ke google.code.com. Jika belum tau cara mengupload javascript ke googlecode, silahkan baca DISINI untuk informasi lebih lanjut.

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