Membandingkan Cara Pemanggilan File Javascript Antara Import vs Src

Kecepatan loading merupakan hal penting dalam layanan produk apapun tanpa terkecuali aplikasi dan  Game. Oleh sebab itu, agar dapat menghemat waktu tunggu yang dibutuhkan (load) maka perlu cara yang tepat. Pada Javascript ada beberapa cara untuk meload file terpisah agar dapat digunakan sebagai satu aplikasi atau game utuh.

Aplikasi atau game dengan Javascript tidak jarang yang sengaja dibuat dalam beberapa file .js. Sebelum dapat dimanfaatkan, maka bagian utama akan tetap membutuhkan pemanggilan masing-masing file sebelum aplikasi dapat berjalan sempurna. 

Hari ini saya sedang bersemangat melakukan uji coba meload scene di Javascript yang terpisah pada sebuah file untuk setiap classnya. Kebetulan saya sedang ingin membuat game, seperti biasanya menggunakan phaser3 dimana memanfaatkan class Javascript. 

Cara Pemanggilan File Javascript dengan Import vs Src

Kebetulan saya sudah pernah menggunakan beberapa cara dalam meload file terpisah, dan saat ini jadi tertarik untuk mengetahui mana yang terbaik diantara cara tersebut. Sekalian saya ingin menguji berapa kecepatan load antara dua cara bagaimana Javascript di load.

Cara untuk memanggil file javascript lain dapat dilakukan dengan:

Cara 1 dengan SRC

<script src="file_lain.js"></script>

Cara 2 dengan Import

dikenal juga  sebagai metode dengan cara modular:

import file_lain from './file_lain.js'

pada pemanggil utama tetap menggunakan src tapi ditambah property type

<script type="module" src="file_modul.js"></script>

Agar kita dapat mengetahui mana yang lebih baik dalam proses loadnya disini yang saya perhatikan adalah waktu load total. Karena perbedaan cara memanggil file tentu membutuhkan resource file yang berbeda. Semakin kecil nilai waktu load akan membuat aplikasi atau game semakin bagus.

Pada pengujian ini saya sudah memastikan bahwa masing-masing cara harus dapat dipastikan aplikasi atau game dapat berjalan lancar. Jadi bukan hanya untuk meload filenya saja tapi harus dapat dipastikan bahwa kinerja aplikasi juga normal. 

File Pengujian

A. File yang Digunakan Dengan Cara Src, antara lain:

  • index.html
  • level1.js
  • level2.js
  • phaser.min

Jumlah total file 4 buah. Pemanggilan file javascript melalui src dilakukan pada file index.html

javascript dipanggil dengan src

B. File yang dibutuhkan dengan Cara Import, antara lain:

  • index.html
  • index.js
  • level1.js
  • level2.js
  • phaser.min
Jumlah total file 5 buah. Pemanggilan file javascript dengan cara import dilakukan pada file index.js



Sedangkan file index.html hanya memanggil file index.js dengan src bertipe = module
Memanggil file javascript


Penjelasan Dibalik File Yang diload Berbeda Jumlah

Sebagaimana tehnik Javascript yang terjadi pada pemanggilan file dengan cara import dibutuhkan satu lagi file untuk menangkap object phaser agar dapat dijadikan module. Hal ini berkaitan dengan proses Export import object, Untuk lebih jelasnya dapat dibaca pada artikel lain di blog ini.

Isi file level1 dan level2 adalah sama. Jadi yang berbeda adalah pada file index.html dan ada tidaknya file index.js.

Catatan:

Pada list file diatas selalu ada file phaser, tentu saja karena saya menggunakan library Phaser 3 untuk pembuatan game. Masalahnya selain file diatas, sebenarnya Phaser.js secara otomatis akan meload file-file lain yang akan tetap di load walaupun anda tidak memanggilnya. 

Diantara file yang otomatis di load tersebut, merupakan file gambar yang berupa kode base64. ditandai dengan data:image/png:base64;

Dengan demikian maka secara tidak langsung akan mempengaruhi waktu load total yang akan dibutuhkan untuk menjalankan Aplikasi atau Game. Tapi untuk pengujian ini tentunya gak berpengaruh karena sama-sama meload phaser - jadi phaser  juga sama tetap akan meload file tersebut pada masing-masing cara yang sedang diuji.


Kecepatan loading Total Game Phaser

Proses Pengujian dan Pengambilan Nilai

Untuk uji coba ini saya menggunakan server dari live-server yang saya pasang di npm. Setelah di folder tempat aplikasi dipanggil melalui live-server, maka yang dibaca pertama oleh live server adalah file index yang berisi pemanggilan file javascript baik dengan src ataupun dengan tehnik import .

Untuk mendapatkan hasil testing, live-server kita aktifkan dulu. Setelah server otomatis menjalankan kode melalui browser maka browser saya aktifkan mode developer. Kemudian di refresh (f5) dan dicatat hasilnya utuk masing cara. Hasil perolehan rata-rata lebih kecil merupakan nilai yang lebih baik dari nilai yang lebih besar.

Untuk kali ini saya tes dengan di refresh sampai nilai load yang kelima. Kemudian masing-masing cara saya ambil rata-ratanya. 

Hasil Pengujian

Berikut ini Hasil Pembacaan di komputer saya:

Src

Import

4.31s2.65s
3.06s2.11s
3.63s2.81s
2.91s2.47s
3.99s2.30s
Nilai Total:
17.9s12.34s
Nilai Rata-rata:
3.58s2.46s

Gambar Proses Pengujian pada masing-masing cara

Screenshoot Pengambilan Nilai Load dengan Src

Cara Pemanggilan File Src

Screenshoot Pengambilan Nilai Load dengan Import

Cara Pemanggilan File Import


Kesimpulan 

Dari hasil uji yang sederhana ini terlihat bahwa nilai pada masing-masing tahap yang saya dapatkan nilai dengan cara import selalu lebih kecil dari cara src. Sehingga didapatkan kesimpulan bahwa 

"kecepatan load dengan cara import lebih cepat dibanding cara src

dapat dibuktikan dengan nilai rata2 import lebih kecil ( < ) dari  nilai rata2 src. 



Posting Komentar