Minify / Compressor Javascript Rekomendasi Google

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 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).
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".
Minify javascript yang direkomendasikan oleh google
 memperkecil ukuran javascript rekomendasi oleh google
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 :
memperkecil size javascript yang direkomendasikan google
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...!!!

Lost Sector
Lost Sector

16 comments:
Write comment
  1. saya tes hasilnya



    Compilation did not complete successfully. See errors pane for details.
    Original Size: 1.01MB (688.7KB gzipped)
    Compiled Size: 0 bytes (20 bytes gzipped)
    Saved 100.00% off the original size (100.00% off the gzipped size)


    Number of errors: 147
    JSC_PARSE_ERROR: Parse error. syntax error at line 1 character 0 in www.terapinarkoba.com

    ^
    JSC_PARSE_ERROR: Parse error. missing ; before statement at line 2 character 6 in www.terapinarkoba.com
    <html b:version='2' class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml'...


    bagaimana caranya gan

    ReplyDelete
    Replies
    1. Ini yang diparser Javascript atau kode template ?
      Kok ada kode <html b:version='2' class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml'... ?

      Delete
  2. wah, buat pemula spt saya agak ribet nih

    ReplyDelete
    Replies
    1. betul aku juga kurang paham yang di maksud.

      Delete
  3. Nuwbie Kek Ane Ga mau Aneh2 lah Biarlah Loading berat.. Dari pada Kocar Kacir Ntar...

    ReplyDelete
    Replies
    1. Ini bukan buat parser kode HTML atau CSS, tapi untuk javascript, karena kadang didalam isi javascript terdapat banyak tulisan tambahan seperti pembuat scriptnya yang seharusnya tidak diperlukan...

      Nah, kalau memparser / mengconvert kode CSS, itu kadang membuat tampilan template acak-acakan...!!!

      Delete
  4. kacau nih kalo mau blajar
    agak2 bingung gmana gtu Sob....

    mohon bantu yeah Jika Ada Saat Nya saya Salah

    ReplyDelete
  5. bagus sih artikel nya tapi saya masih bingung cara 1 yang di maksud link javascript ny atu yang gimana, disit kan ada pilihan , terus misalnya kode iklan kan pki jva script apanya yg dimksukan boss

    ReplyDelete
  6. cara 1 kan pda klom nya tambhkan url itu url alamat blog atau apa .. aduuh

    ReplyDelete
  7. Kalau uda melalui test itu kodenya di tarok mana gan?

    ReplyDelete
  8. you can try this free online js minifier to reduce your js file size.

    ReplyDelete
  9. Saya juga lagi buat buat minify untuk javascript gan, tapi susah hikz payah deh, coba cek nih ada alat buat memperkecil ukuran CSS, monggo gan diliat kasih kritikan juga ya
    Alat Kompress Kode CSS

    ReplyDelete
  10. Memang buat yang masih awam terasa sangat membingungkan,tapi jika terus belajar lama-lama juga bisa paham

    ReplyDelete
  11. Tapi tenang biar tidak tambah enjoy sambil mendengarkan streaming radio online

    ReplyDelete