Membuat Custom jQuery Build – Full Guide

Saat ini jQuery merupakan library javascript yang paling populer, karena kemudahannya dan kelengkapan fitur yang dimiliki. Seiring dengan perkebangannya, semakin banyak fitur yang ditambahkan, yang  berdampak pada semakin besarnya ukuran file, hingga lebih dari 240kb untuk versi uncompressed, dan yang versi minified pun ukurannya masih  lebih dari 80Kb, hal tersebut sedikit banyak mempengaruhi performa website kita.

Dalam praktek, dari semua fitur yang ada, banyak yang  tidak kita perlukan, untuk itu  jquery menyediakan fitur “build from source” dengan opsi untuk tidak menyertakan module (fitur) tertentu, sehingga dapat menghasilkan file jQuery yang lebih kecil, yang dampaknya akan  mempercepat waktu load website kita.  Fitur ini tersedia mulai jQuery versi 1.8.0.

Banyak tutorial untuk melakukan ini namun tidak ada yang benar-benar komprehensif, untuk itu pada tutorial kali ini kita akan membahasnya secara mendalam dan komprehensif, sehingga kita faham apa yang kita lakukan.

1. Persiapan

Pada tutorial kali ini, diasumsikan kita menggunakan sistem operasi windows, dan untuk dapat membuat custom build jQuery, kita memerlukan beberapa tools:

• Software Node.js (termasuk NPM js)
  Instalasi software Node.js dapat dilakukan dengan mudah, sobat dapat langsung mengunjungi https://nodejs.org/en/ untuk mendownload file instalasinya kemudian  install dengan mengikuti wizard yang ada.GirGit
• Git
  Seperti Node.js, instalasi  Git pun dapat dilakukan dengan mudah, file installernya dapat langsung diiunduh di alamat https://git-scm.com/downloads, terdapat  beberapa parameter yang perlu diperhatikan (berkaitan dengan tutorial kali  ini)  ketika melakukan  instalasi, untuk lebih jelasnya silakan kunjungi halaman: Cara Install Git Pada Windows
• Grunt
  Instalasi Grunt juga dapat dilakukan dengan cepat dan mudah, instalasi akan langsung kita bahas di tutorial ini.

Ternyata banyak ya tools yang diperlukan, meskipun banyak sobat tidak perlu  khawatir, karena tools tersebut dapat diinstall dengan mudah, sobat tinggal mengikuti installasi wizard nya atau mengikuti tutorialnya.

Setelah kita install npm dan git, langkah selanjutnya adalah kita install Grunt, caranya, buka command promt dan jalankan perintah  npm install -g grunt-cli, catatan: proses instalasi memerlukan koneksi internet.  

2. Clone jQuery dari Github

Sebelum kita meng-clone source jQuery dari github, kita buat terlebih dahulu folder  sebagai tempat penyimpanannya, pada contoh kali ini kita buat folder Git Repository pada drive E (E:Git Repository), selanjutnya buka command promt dan arahkan cursor ke folder tersebut, untuk melakukan cloning, gunakan perintah git clone, contoh seperti gambar berikut ini:

proses tersebut akan membentuk  folder baru dengan nama  jquery yang berlokasi  didalam  direktori E:Git Repository.

3. Install NPM Kedalam Repository

Selanjutnya kita arahkan  cursor ke folder jquery dengan perintah cd jquery dan kita download source npm ke dalamnya dengan perintah npm install. source npm ini cukup besar, hasil ekstrak nya mencapai sekitar 50mb.

catatan: proses instalasi memerlukan koneksi internet

Langkah selanjutnya kita jalankan perintah grunt. Perintah ini akan membentuk folder dist yang berisi file jquery, file jquery yang terbentuk merupakan versi terbaru, untuk  mengeceknya, buka file jquery.js yang ada di folder tersebut.

4. Backup Repository

Sejauh ini repository jquery sudah siap kita manipulasi, untuk itu ada baiknya kita backup terlebih dahulu apa yang telah kita kerjakan, sehingga jika terjadi sesuatu yang tidak kita inginkan, file tersebut dapat kita kembalikan ke kondisi awal. Untuk melakukan backup, cukup  copy folder jquery, dan paste dengan nama tertentu misal: jquery_npm_grunt.

5.  Buat custom build jquery

Saatnya kita tiba pada bagian utama tutorial ini yaitu membuat  custom build jquery. Seperti disebutkan sebelumnya, jquery menggunakan git sebagai version controlnya, sehingga untuk melakukan manipulasi, kita juga harus menggunakan perintah yang disediakan git, jika sobat tidak familiar dengan git, tidak apa apa, disini kita hanya menggunakan beberapa perintah sederhana saja, seperti checkout, branch dan commit, jika ingin mempelajari perintah tersebut, dapat mengunjungi web  attlasian.

Langkah-langkah yang perlu  kita lakukan adalah:

1. Buka branch jquery.
2. Buat modifikasi pada file jquery.
3. Buat dan buka branch baru (opsional).
4. Simpan perubahan  (opsional).
5. Membuat Tag  (opsional).

5.1 Buka branch jquery

Untuk membuka branch jquery, kita gunakan perintah git checkout <versi jquery>. Jika kita mengosongkan versi jquery maka yang terbuka adalah versi terakhir termasuk versi alpha/beta, oleh karena itu  sebaiknya kita tuliskan versinya sehingga kita benar-benar tahu versi mana yang akan kita manipulasi.  Untuk mengetahui list  branch/versi jquery yang ada pada repository, kita dapat menggunakan perintah git tag,  contoh:

Pada contoh kali ini kita akan menggunakan versi 2.1.4,  kita buka/aktifkan brach tersebut:

git checkout 2.1.4

ketika perintah tersebut dijalankan, maka pada folder dist (jquery/dist) akan terbentuk file jquery versi 2.1.4 seperti tampak pada gambar berikut:

untuk mengecek  versinya, silakan buka file jquery.js dan lihat bagian atas. Dari gambar diatas terlihat bahwa ukuran file jquery adalah sebesar 242KB dan yang versi minified (jquery.min.js) adalah sebesar  83KB. Sobat dapat bereksperimen dengan mencoba coba versi yang ada.

5.2 Modifikasi file jquery

Selanjutnya, dengan grunt, kita buat file jquery dengan menghilangkan  fitur/module yang tidak kita perlukan.  Terdapat cukup banyak fitur/module yang dapat kita hilangkan sepert ajax, effect, event, dll, untuk list dan penjelasan lengkapnya  dapat dilihat pada halaman  dokumen  jquery repository.

Untuk menghilangkan module tertentu kita gunakan perintah grunt custom:-<nama module>, misal menghilangkan ajax:  grunt custom:-ajax, menghilangkan ajax, effects, dan event: grunt custom:-ajax,-effects,-event, perlu diperhatikan bahwa tidak boleh ada spasi pada penulisan module, sehingga jika kita tulis grunt custom:-ajax, -effects, -event, akan muncul pesan error.

Pada contoh kali ini kita akan menghilangkan module ajax, peritah dan  output yang dihasilkan seperti tampak pada gambar berikut:

Proses diatas akan membentuk file jquery pada folder dist. Jika kita buka folder tersebut, maka ukuran file jquery akan berubah seperti tampak pada gambar berikut:

Dari gambar  diatas terlihat bahwa ukuran file jquery mengecil menjadi 213KB  sedangkan yang versi minified mengecil menjadi 74KB, cukup signifikan dibanding sebelumnya.

Kita bebas menjalankan berbagai perintah, misal ketika  menjalankan  grunt custom:-ajax,-effects,-event, module ajax, effects, dan event akan hilang, kemudian ketika kita  jalankan kembali perintah grunt custom:-ajax  , module effects dan event yang tadinya hilang akan kembali lagi.

Kita coba lagi dengan menjalankan perintan  grunt custom:-ajax,-deprecated,-deferred,-wrap,-offset, hasil yang kita peroleh adalah:

Sampai dengan saat ini, kita telah selesai membuat custom jquery, file yang terbentuk pada folder jquery/dist sudah dapat kita gunakan. Lebih lanjut jika ingin menyimpan perubahan yang telah kita lakukan, dapat mengikuti  bagian berikutnya.

5.3  Buat dan buka branch baru

Sebelum melakukan penyimpanan, kita perlu untuk membuat branch baru, agar hasil modifikasi yang kita lakukan tidak mempengaruhi  yang sudah ada, untuk itu perintah yang kita perlukan adalah:

git branch <nama branch baru>
git checkout <nama branch baru>

atau yang lebih singkat:

git checkout -b <nama branch baru>

perintah git branch akan membuat branch baru dan git checkout akan mengaktifkan  branch baru tersebut, misal  kita buat branch baru dengan nama 2.1.4-ajax,  perintah yang kita gunakan:

git checkout -b "2.1.4-ajax"

hasil yang kita peroleh:

Jika sebelumnya kita berada di branch 2.1.4, saat ini kita berada di branch 2.1.4-ajax

5.4 Simpan Perubahan

Selanjutnya kita simpan perubahan yang telah kita lakukan, namun sebelum menyimpanya kita perlu mendefinisikan nama dan email kita di file configurasi git, jika tidak, maka git akan memunculkan pesan error. Untuk mendefinisikan email, kita gunakan perintah  git config --global user.email "email@example.com", sedangkan untuk nama, kita gunakan perintah  git config --global user.name "Your Name", kedua perintah tersebut dapat kita gabungkan menjadi satu dengan menggunakan tanda &&. Contoh seperti gambar berikut:

setelah itu kita simpan branch kita dengan perintah

git add .
git commit -m <messsage>

git add . digunakan untuk menambahkan semua file ke “staging area” dan git commit -m <message> untuk menyimpannya ke dalam branch, postfix-m  merupakan kependekan dari --message.  Message harus mengikuti aturan tertentu, seperti menggunakan awalan “Merge branch”, jika tidak, maka akan muncul pesan error.

Kedua peritah tersebut diatas dapat digabung menjadi:

git commit -a -m <message>

contoh mari kita simpan perubahan yang telah kita buat dengan perintah:

git commit -a -m "Merge branch 2.1.4-ajax (v2.1.4 with no ajax)"

maka hasil yang kita peroleh adalah sebagai berikut:

Penyimpanan branch selesai, untuk memanggil branch tersebut,  kita gunakan  perintah git checkout 2,1,4-ajax

5.5 Menambahkan Tag

Sebelum mengakhiri tutorial ini, perlu untuk dibahas mengenai tag. seperti pembahasan diatas, kita dapat melihat versi jquery yang ada dengan memanggil perintah git tag, untuk itu agar kita dapat dengan mudah mengingat branch yang kita buat, kita dapat menambahkan tag untuk branch kita, perintah yang kita gunakan adalah:

git tag -a <nama tag> -m <message>

postfix -a pada perintah diatas merupakan kependekan dari  --annotate, karena tag diurutkan secara alphanumeric, agar mudah diidentifikasi, kita buat tag dengan  nama 2.1.4-ajax, contoh kita jalankan perintah berikut:

git tag -a 2.1.4-ajax -m "v2.1.4 with no ajax"

Jika kita jalankan perintah git tag, maka tag yang kita buat akan muncul bersama dengan tag lain yaitu versi jquery yang ada.

6. Kesimpulan

Dengan custom jquery build, memungkinkan kita untuk membuat jQuery versi kita sendiri dengan menghilangkan berbagai module/fitur yang tidak kita perlukan  seperti ajax, effects, event, dll, sehingga dapat mengurangi ukuran file jQuery, yang dampaknya akan mempercepat kinerja website kita.

Pembuatan  custom build jquery memerlukan beberapa tahapan yang awalnya terlihat cukup rumit, namun setelah terbiasa akan terasa  mudah, disamping itu sekaligus kita juga dengan mudah belajar mengenai version control dengan software Git.

Demikian pembahasan cara membuat custom build jquery, semoga bermanfaat.