Cara Kompres File Javascript Dengan UglifyJS

Setelah sebelumnya kita bahas mengenai cara kompres file javascript menggunakan YUICompressor dari Yahoo dan Closure Compiler dari Google, pada kesempatan ini kita akan membahas mengenai cara kompres file javascript dengan UglifyJs.

UglifyJS sendiri ditulis menggunakan javascript, hingga saat ini masih aktif dikembangkan dan sudah mencapai versi 2, dimana banyak fitur bermanfaat yang ditambahkan.

Compressor ini mungkin yang terbaik diantara yang ada karena disamping aman, pada kondisi tertentu mampu mengkompres file yang menghasilkan ukuran file paling kecil dibanding compressor lain.

I. Install NPM

Untuk dapat menggunakan UglifyJs, kita harus menginstall NPM (Node.js Package Manager). Cara paling mudah adalah dengan menginstall Nodejs. Buka halaman  https://nodejs.org/en/  kemudian download file installer nya. File yang didownload otomatis menyesuaikan dengan sistem operasi kita apakah 32 atau 64 bit. kemudian jalankan installer tersebut.

Setelah proses instalasi selesai, tes apakah NPM telah aktif, caranya buka command prompt dan ketikkan npm --version, jika berhasil maka akan muncul versi dari NPM yang terinstall.

II. Install UglifyJS

Langkah selanjutnya install UglifyJs dengan menjalankan perintah npm install uglify-js -g, perintah tersebut akan menginstall versi terakhir dari UglifyJs

Penting diperhatikan bahwa kita harus menambahkan parameter -g agar dapat menjalankan UglifyJs dari command prompt.

Untuk memastikan UglifyJs sudah aktif, ketikkan perintah uglifyjs --version pada command pompt, jika berhasil, maka akan muncul versi dari UglifyJs yang terinstall.

III. Kompres File Javascript Dengan UglifyJs

Selanjutnya untuk meng kompres file javascript dengan UglifyJs, lakukan langkah berikut:

1. Buat direktori misal uglifyjs. Pada contoh ini saya membuatnya di drive E, kemudian copy file javascript yang ingin di kompres ke direktori tersebut, misal kali ini saya menggunakan file jquery-1.12.4.js
2. Buka command prompt kemudian arahkan cursor ke direktori tersebut, selanjutnya jalankan perintah dengan format  uglifyjs path/to/sourcefile --output path/to/outputfile pada contoh ini, saya jalankan perintah uglify jquery-1.12.4.js --output jquery-1.12.4_min.js

   

   maka kita akan memperoleh hasil sebagai berikut:

   

   Dari gambar diatas terlihat bahwa ukuran file mengecil cukup signifikan, hampir setengahnya. TETAPI pada setting default, UglifyJS hanya akan menghilangkan comment, spasi, enter, dan karakter lain yang tidak diperlukan.

3. Gunakan parameter --compress --mangle untuk hasil kompresi maksimal. Parameter ini akan mengganti nama variabel, property, dll  menjadi 1 huruf, sehingga akan lebih memperkecil ukuran file. contoh, jika kita mengkompres file javascript berikut:

   // A simple function.
   function hello(longName) {
     alert('Hello, ' + longName);
   }
   hello('New User');

   maka hasil yang diperoleh adalah:

   function hello(l){alert("Hello, "+l)}hello("New User");

   Mari kita coba pada file jquery kita tadi, ubah perintah menjadi

   uglifyjs jquery-1.12.4.js --compress --mangle --output jquery-1.12.4_min.js

   maka hasil yang kita peroleh adalah:

   

   Dari gambar tersebut terlihat bahwa ukuran file berkurang signifikan hingga 66.5%

uglifyjs shared.js --compress hoist_vars=true,unused=false --mangle --output shared.min.js

for %f in (*.js) do uglifyjs %f --compress --mangle --output %~nf.min.js

for %f in (data.js main.js) do uglifyjs %f --compress --mangle --output %~nf.min.js

uglifyjs data.js main.js shared.js --compress --mangle --output merged.min.js