Jan 04

[Tutorial] Mempercepat Waktu Loading pada EXTJS dengan Production Mode

Sejak versi 4, EXTJS memang menerapkan cara pembuatan program secara MVC. Sehingga harus dipisah file-file kode untuk Model, View, Controller. Masing-masing file dan folder juga memiliki aturan penamaan yang ketat. Jika ada huruf yang tidak cocok (termasuk besar dan kecilnya) bisa membuat aplikasi anda hanya menampilkan layar putih tanpa pesan apa2. Yang menjadi masalah di sini adalah, semakin banyak file javascript yang kita buat, berarti semakin banyak juga file yang harus di-load oleh browser pada saat aplikasi berjalan. File inti dari EXTJS sendiri saja sudah banyak, apalagi ditambah file yang kita buat. Ada sebuah aplikasi yang saya buat, butuh waktu lebih dari 5 detik untuk load satu halaman. Dan itu berjalan di komputer yang sama alias LOCALHOST. Bayangkan jika aplikasi diletakkan di internet.

Mengapa itu bisa terjadi? Karena untuk setiap file yang di-load oleh browser, ada operasi Input/Output (I/O) yang dilakukan oleh komputer. Setiap file yang diminta, harus diambil dulu dari harddisk. Padahal operasi I/O adalah salah satu operasi yang membutuhkan waktu yang lama. Ilustrasi dari kejadian ini dapat dilihat pada gambar di bawah ini.

Alur request halaman web

Alur request halaman web

Ternyata, EXTJS sudah menyiapkan solusi dari masalah tersebut. Salah satu solusi untuk mempercepat waktu loading adalah dengan menjadikan beberapa file javascript tadi menjadi sebuah file. Sehingga waktu tidak terbuang untuk open/close file. EXTJS menyediakan solusi dengan membuat yang namanya production mode. Jadi ketika anda mengembangkan aplikasi pertama kali, anda berada pada development mode, dimana semua class yang ada akan berada pada file terpisah dan semua di-load. Ketika aplikasi siap diluncurkan, baru beralih ke production mode yang akan menyatukan beberapa file tadi menjadi satu dan memasukkan class-class yang dibutuhkan saja.

Namun untuk itu ada beberapa syarat yang harus dipenuhi dan beberapa langkah yang harus dilakukan. Berikut ini adalah langkah-langkahnya :

  1. File class javascript yang dibuat harus mengikuti aturan EXTJS. Application class (Ext.application) harus berada di suatu direktori, dan file class untuk controller, model, view, dan store harus berada di subdirektori di bawah direktori yang bernama sama dengan aplikasi. Contohnya pada gambar di bawah ini (Misalkan nama aplikasi : XYZ). Folder XYZ berada di direktori yang sama dengan app.js.
  2. Download Sencha SDK Tools dari sini
  3. Install aplikasi tersebut di komputer, di contoh ini saya menggunakan linux 64 bit dan aplikasi Sencha SDK Tools terletak di /opt/SenchaSDKTools-2.0.0-beta3/bin
  4. [Optional] Jika file-file javascript anda hanya bisa diakses setelah user melalui proses login, maka untuk sementara ubahlah aplikasi anda agar halaman html/php/jsp anda dapat diakses tanpa perlu melalui proses login
  5. Buat file jsb3 yang nanti akan berisi definisi project anda dengan menggunakan perintah berikut (URL_halaman_html bisa diisi dengan URL untuk mengakses halaman html yang mengandung link ke URL file javascript):
    /opt/SenchaSDKTools-2.0.0-beta3/sencha create jsb -a URL_halaman_html -p nama_file.jsb3 -v
    Contoh :
    /opt/SenchaSDKTools-2.0.0-beta3/sencha create jsb -a http://localhost/appsku/index.php/main/home -p app.jsb3 -v
  6. Buka file jsb3 yang baru dibuat, lihat bagian bawah dari file tsb, dan ubah bagian “target” sesuai dengan nama yang anda inginkan. Contohnya seperti gambar di bawah ini :
    jsb
  7. Lalu, proses selanjutnya adalah membuat file javascript yang akan memuat seluruh class yang anda butuhkan. Gunakan perintah berikut :
    /opt/SenchaSDKTools-2.0.0-beta3/sencha build -p app.jsb3 -v -d
  8. Terakhir, ubah file html anda agar menggunakan file javascript yang baru saja dibuat (dalam contoh ini adalah file app-prod.js).
    <script src=”ext/ext-debug.js” type=”text/javascript”></script>
    <script src=”app-prod.js” type=”text/javascript”></script>
    NB : file EXTJS yang digunakna tetap ext-debug.js, karena ketika diubah menjadi ext.js, malah terjadi kesalahan
  9. Ulangi langkah 4-8 jika ada beberapa file Application EXTJS yang anda gunakan

Dengan menggunakan cara ini, saya dapat mempercepat waktu loading hingga beberapa kali lipat. Sehingga lebih nyaman untuk digunakan pada mode production (bukan development).

Be Sociable, Share!

0
comments

Reply

[+] kaskus emoticons nartzco