Minifying Your JavaScript with Uglify

time to read 2 min | 313 words

Do your web visitor a favor with faster website

Programmer biasanya selalu memperhatikan performa dari kode yang mereka hasilkan. Akan tetapi membuat kode javascript yang berjalan di sisi klien membutuhkan perhatian lebih.

Browser yang kita gunakan tidak dapat menampilkan apapun hasil pekerjaan kamu jika javascriptnya belum terdownload ke browser. Sungguh sangatlah penting untuk mempercepat javascript terdownload secepat mungkin agar website tidak terasa lemot.

Salah satu hal yang bisa kamu lakukan untuk mempercepat javascript terdownload ke browser adalah dengan memperkecil ukurannya.

(function() {
    var process = "minification";
    var tool = "Uglify";

    function logProcess () {
        console.log(process);
    }

    logProcess();
    // => "minification"
})();

Contoh kode javascript ini dapat diperkecil ukurannya menjadi seperti ini

!function(){function n(){console.log(i)}var i="minification";n()}();

Walaupun kodenya terlihat sangat berbeda, javascript engine melakukan hal yang sama. Kode ini diperoleh dengan melakukan beberapa hal seperti :

  • Menghilangkan whitespace.
  • Menghilangkan komentar.
  • Mengubah nama variabel dan fungsi menjadi lebih pendek.
  • Menggunakan sintaks IIFE yang lebih concise
  • Membuang variabel yang tidak digunakan (variabel tool pada contoh diatas).

Ada cukup banyak tools untuk memperkecil ukuran javascript, tetapi yang paling mudah digunakan adalah UglifyJS. Untuk memulai menggunakannya

  1. Pastikan Node JS sudah terinstall.
  2. Jalankan sudo npm install -g uglify-js di terminal kamu.

Kamu akan dapat menggunakan UglifyJS dengan perintah berikut

uglifyjs myfile.js --output myfile.min.js  

Pada setting defaultnya, UglifyJS hanya akan melakukan minification sederhana dengan menghilangkan whitespace dan komentar saja. Untuk hasil lebih baik kamu bisa menambahkan flag ini.
1. --mangle akan mengubah nama variabel dan fungsi menjadi lebih pendek
2. --compress akan melakukan optimasi dan membuang variabel yang tidak digunakan.

Menggunakan kedua flag tersebut menghasilkan perintah seperti ini

uglifyjs myfile.js --output myfile.min.js --mangle --compress  

UglifyJS juga memiliki kemampuan untuk mengecilkan banyak file sekaligus dan menggabungkannya menjadi 1 file dengan perintah berikut.

uglifyjs folderJS/*.js --output all.min.js --mangle --compress  

Untuk cara penggunaan yang lebih detil, kamu bisa lihat disini.

Sekarang, kamu sudah punya tambahan tool yang solid. Waktunya membuat website yang lebih cepat!