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:

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.

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.

   

   Maka akan kita peroleh hasil sebagai berikut:

   

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:

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:

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

Hasil yang kita peroleh adalah:

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.

Hasil yang kita peroleh

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