ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Cara Kompres File Javascript Dengan YUICompressor

Salah satu cara untuk mempercepat akses website adalah memperkecil ukuran file agar proses download menjadi lebih cepat, salah satu diantaranya adalah file javascript, untuk itu kali ini kita akan membahas mengenai cara kompres file javascript dengan YUICompressor.

YUICompressor merupakan salah satu javascript compressor terbaik, disamping Closure Compiler yang dikembangkan oleh Google dan UglifyJS yang digunakan oleh oleh jQuery untuk mengkompres libararynya.

Banyak yang mereview bahwa compressor ini 100% aman digunakan baik untuk javascript maupun CSS. Untuk dapat menggunakannya ada beberapa hal yang perlu kita lakukan.

I. Install Java Runtime Environment

Untuk dapat menggunakan YUICompressor, maka kita harus menginstall Java Runtime Environment (JRE). Untuk mengecek apakah JRE sudah terinstall, buka command prompt dan ketikkan java -version atau cukup java saja kemudian enter.

Jika windows belum mengenali command tersebut, berarti JRE belum terinstall, jika sudah terinstall, maka akan tampak seperti gambar dibawah ini:

Cek Versi JRE

pada gambar tersebut, versi JRE yang terinstall adalah versi 8 (display: 1.8.x)

Untuk menginstall JRE, terlebih dahulu kunjungi halaman Java SE – Download kemudian cari Link JRE Download kemudian dan klik tombol tersebut

Pada halaman berikutnya klik “Accept license Agreement” kemudian pilih file .exe yang ingin diinstall. JIKA Anda pengguna windows 64 bit, tidak masalah jika menginstall JRE 32 bit.

II. Download YUICompressor (file .jar)

Untuk mendownload YUICompressor, Anda tidak perlu clone atau download dari repo Github karena semuanya adalah source code, yang kita perlukan adalah file .jar (Java Archive).

Untuk mendownload VERSI TERAKHIR dari YUICompressor, silakan buka halaman release resminya di: Release yui/yuicompressor kemudian download file jar nya.

Download YUICompressor

Nama file .jar biasanya memiliki format YUICompressor-x.x.x.jar, misal YUICompressor-2.4.8.jar, pada contoh ini saya menggunakan versi 2.4.8.

III. Kompres File Javascript Dengan YUICompressor

Selanjutnya mari kita kompres file javascript dengan YUICompressor, langkah yang perlu kita lakukan adalah:

  1. Pertama kita buat direktori kerja dimana kita akan menempatkan semua file yang ada, misal kita buat direktori compressor di drive E.
  2. Copy file yuicompressor-2.4.8.jar dan file javascript yang akan dikompres ke direktori tersebut, misal saya akan menggunakan contoh file jquery-1.12.4.js
  3. Buka command prompt dan arahkan cursor ke direktori yang kita buat tadi kemudian ketikkan perintah dengan format: java -jar /path/to/yuicompressor path/to/original/javascript -o path/to/output

    pada contoh ini saya menggunakan perintah java -jar yuicompressor-2.4.8.jar jquery-1.12.4.js -o jquery-1.2.4_min.js.

    Kompres File Javascript Dengan YUICompressor - Command Line

    Maka akan kita peroleh hasil sebagai berikut:

    Hasil Kompres File Javascript Menggunakan YUICompressor

IV. Kompres Banyak File Javascript Dengan YUICompressor

Pada kondisi tertentu mungkin kita ingin mengkompres banyak file javascript sekaligus, yang tentu kita tidak ingin melakukannya secara manual satu per satu.

YUICompressor sendiri sudah menyediakan fitur ini, misal kali ini kita akan mengkompres file data.js, main.js, dan shared.js, perintah yang kita jalankan adalah sebagai berikut:

java -jar yuicompressor-2.4.8.jar *.js -o ".js$:-min.js"

perintah tersebut akan mengkompres semua file javascript (ekstensi .js), untuk mengkompres file tertentu, kita bisa menggunakan perintah:

java -jar yuicompressor-2.4.8.jar data.js shared.js -o ".js$:-min.js"

Hasil yang kita peroleh adalah sebagai berikut:

Hasil Kompres Banyak File Javascript Dengan YUI Compressor

IV. Menggabungkan dan Meng-kompres File Javascript Dengan YUICompressor

Selanjutnya, tidak sekedar mengkompres, mungkin kita ingin menggabungkan beberapa file javascript terlebih dahulu kemudian baru mengkompres nya.

Untuk menggabungkannya, kita tidak dapat menggunakan YUICompressor melainkan secara manual atau menggunakan command prompt standar windows.

Berikut ini command prompt untuk menggabungkan semua file javascript kemudian mengkompres nya dengan YUICompressor

type file1.js file2.js > merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

cara tersebut digunakan jika kita ingin menggabungkan file tertentu, bagaimana jika kita ingin menggabungkan semua file pada suatu direktori? caranya, jalankan perintah berikut:

copy /b *.js merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

apakah kedua cara tersebut selalu berhasil? perhatikan gambar berikut:

Error Saat Menggabungkan File Dengan YUICompressor

pada gambar tersebut, file berhasil digabungkan menjadi file merged.js, namun terjadi error karena terdapat tanda ; yang miss (tidak ditemukan), ternyata penyebabnya, file data.js (file pertama) tidak diakhiri tanda ;, pada kondisi sendiri, file data.js tetap dapat dijalankan, namun ketika digabung, statement harus diakhiri dengan tanda ;

Untuk memperbaikinya, sebelum kita gabung, kita tambahkan tanda ; di akhir tiap-tiap file

for %f in (*.js) do echo ; >> %f

setelah itu baru kita gabung dan kompres file tersebut

copy /b *.js merged.js && java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js

Gabung dan Kompres File dengan YUICompressor

Hasil yang kita peroleh adalah:

Hasil Merge dan Kompres Banyak File Javascript Dengan YUI Compressor

V. Buat Otomatis

Jika hal tersebut diatas kita lakukan berulang kali, maka kita perlu untuk membuat prosesnya menjadi lebih singkat, meskipun tidak FULL otomatis, setidaknya kita tidak perlu membuka command prompt dan menulis perintah secara manual.

Salah satu cara yang dapat dilakukan adalah membuat file .bat.

Misal melanjutkan contoh sebelumnya, kita akan membuat file bat untuk menggabungkan dan mengkompres file data.js, main.js, dan shared.js yang ada di direktori E:\compressor.

Caranya, buka notepad dan copy-paste command berikut

for %%f in (*.js) do echo ; >> %%f
copy /b *.js merged.js
java -jar yuicompressor-2.4.8.jar merged.js -o merged.min.js
pause

kemudian simpan dengan nama mergeall.bat di direktori yang sama. Untuk menjalankannya dobel klik file bat tersebut.

Kompres File Javascript Otomatis Dengan YUI Compressor - Bat File

Hasil yang kita peroleh

Hasil Kompres File Javascript Otomatis Dengan YUI Compressor

Anda dapat bereksperimen sesuai kebutuhan, misal meng kompres file tertentu atau mengkompres tanpa meng combine.

Lebih Lanjut

Anda dapat mempelajari lebih lanjut opsi pada YUICompressor dengan mengunjungi halaman YUICompressor – Github atau mengetikkan perintah java -jar yuicompressor-2.4.8.jar --help pada command prompt.

Demikian tutorial singkat mengenai cara kompres file javascript dengan YUICompressor, sebagai perbandingan anda dapat mencoba kompresi lainnya: Closure Compiler atau UglifyJs

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

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

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

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

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

  6. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  7. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  8. Memahami Fungsi Date Pada PHP

  9. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu

  10. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP