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

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.

Install UglifyJs Dari NPM

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

    Kompres File Javascript Dengan UglifyJs - Command Prompt

    maka kita akan memperoleh hasil sebagai berikut:

    Hasil Kompres File Javascript Dengan UglifyJs

    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:

    Hasil Kompres File Javascript Dengan UglifyJs - Mangle

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

Perlu diperhatikan

Perlu diperhatikan bahwa opsi --compress dan --mangle memiliki opsi yang lebih detail lagi, opsi lebih detail untuk --compressor dapat dilihat pada halaman: Compressor-options, sedangkan untuk --mangle pada halaman: Mangler options

Secara default UglifyJs akan menghapus variabel dan fungsi yang tidak digunakan yang berada SELAIN yang ada di global scope, misal dalam fungsi. Agar tidak ikut terhapus, maka maka kita perlu menambahkan opsi unused=false pada opsi --compressor.

Contoh lain adalah, secara default, UglifyJs juga akan mengabung variabel dengan awalan var menjadi misal: var n,t,r,l, agar UglifyJs tidak menggabungnya, kita gunakan opsi hoist_vars, sedangkan untuk fungsi kita gunakan hoist_func.

Berikut contoh penggunaan opsi tersebut:

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

Untuk mencoba secara langsung opsi yang ada, anda dapat membuka halaman: http://lisperator.net/uglifyjs/ kemudian klik tombol Open Demo

IV. Kompres Banyak File Javascript Dengan UglifyJs

Pada kondisi tertentu terkadang kita ingin mengkompres banyak file sekaligus (tanpa menggabungkannya), untuk melakukannya, kita tidak dapat langsung menggunakan perintah bawaan UglifyJs, melainkan menggunakan command bawaan windows.

Misal kita ingin mengkompres file data.js, main.js, dan shared.js, maka perintah yang perlu kita jalankan adalah:

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

Perintah tersebut akan mencari semua file javascript (file dengan ekstensi .js) kemudian masing masing file di kompres dengan UglifyJS. Jika ingin menerapkannya pada file tertentu saja, dapat menggunakan perintah:

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

Contoh hasil yang kita peroleh adalah:

Hasil Kompres Banyak File Javascript Dengan UglifyJs

V. Menggabung dan Mengkompres Banyak FIle Javascript Dengan UglifyJs

Selanjutnya bagaimana jika kita ingin mengkompres banyak file javascript tapi sekaligus juga ingin menggabungkannya? untuk melakukannya kita dapat langsung menggunakan perintah yang disediakan oleh UglifyJs

Melanjutkan contoh sebelumnya, kali ini kita gabung dan kompres file data.js, main.js, dan shared.js. Perintah yang kita gunakan adalah:

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

Catatan: UglifyJs akan otomatis memperbaiki error yang mungkin timbul saat penggabungan, misal tidak adanya tanda ; pada baris terakhir file pertama.

VI. Buat Otomatis

Jika kita sering meng kompres file javascript dengan UglifyJs, maka pertimbangkan untuk membuat otomasinya, sehingga kita tidak berulangkali membuka dan menjalankan perintah pada command prompt.

Caranya adalah buat file .bat. Buka Notepad dan ketikkan perintah yang ingin kita jalankan, misal: uglifyjs data.js main.js shared.js --compress --mangle --output merged.min.js, kemudian simpan dengan ekstensi .bat misal: mergeall.bat. 

Catatan: File tersebut harus disimpan  satu lokasi dengan file javascript  yang ingin kita kompres.

Untuk menjalankannya tinggal dobel klik file bat tersebut.

Kompres File Javascript Otomatis Dengan UglifyJs dan File .bat

Lebih Lanjut

Untuk melihat opsi apa saja yang tersedia, jalankan perintah uglifyjs --help atau dapat mengunjungi halaman NPM - Uglify-Js atau halaman depan penulisnya jika sewaktu waktu ada UglifyJs versi baru.

Demikian pembahasan mengenai cara kompres file javascript dengan uglifyjs, semoga bermanfaat.

 

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  2. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  3. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

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

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

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

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

  8. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  9. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  10. Memahami Fungsi Date Pada PHP