Bedanya Static dan Dynamic import

Buat yang pernah pakai ES Modules pastinya kalian tidak asing dengan dua kata ini: import dan export. Selain berfungsi untuk membuat sebuah modul dan memudahkan manajemen kode, ES Modules juga berfungsi sebagai tree-shaking. Tree-shaking adalah istilah untuk membuang kode mati (tidak diperlukan) di JavaScript.

Dalam pengembangan aplikasi berbasis JavaScript, umumnya ada Webpack dan Rollup yang berperan sebagai module bundler yang otomatis menghapus kode mati ketika menggabungkan beberapa file JS menjadi satu file JS. Hal ini penting untuk menyiapkan kode yang siap di mode produksi. Hasil yang didapatkan adalah ukuran file minimal dan struktur kode bersih.

Kita kembali ke ES Modules dan kita lihat pada kata import. import berperan untuk memanggil fungsi yang sudah kita export. Untuk menggunakan import, kita perlu menyisipkan atribut type="module" di tag script. Saat ini import bisa dibilang memiliki dua buah sifat yakni statis dan dinamis.

Mulai sekarang mari kita sebut import mode statis sebagai static import dan import mode dinamis sebagai dynamic import.

Static import berperan untuk memuat initial dependencies (dependensi awal) dan tree-shaking seperti yang dijelaksn di atas.

Dynamic import berperan untuk memuat modul yang sifatnya kondisional atau berdasarkan permintaan. Bisa dikatakan dynamic import adalah code splitting. ;)

Contoh Kasus Dynamic Import

Misalnya ada sebuah website X berbasis aplikasi satu halaman (SPA) yang memiliki halaman daftar karakter kartun Spongebob sebagai halaman utama dan detail karakter kartun Spongebob. Kode halaman utama sebesar 3 KB, kode halaman kedua sebesar 2 KB dan keduanya disimpan dalam file bernama main.js yang totalnya menjadi 5 KB.

Pengguna mengakses website X, ia akan melihat halaman daftar karakter kartun Spongebob. Kemudian pengguna menglik salah satu karakter kartun Spongebob (misalnya Patrick) dan website akan menampilkan karakter Patrick.

Mari cermati pernyataan di atas…

  1. Pengguna mengakses website X, ia akan melihat halaman daftar karakter kartun Spongebob sebagai halaman utama yang mana tentu akan memuat file main.js.
  2. Pengguna mengklik salah satu karakter kartun Spongebob (misalnya Patrick) dan website akan menampilkan karakter Patrick yang masih menggunakan file main.js (tidak perlu dimuat lagi karena berbasis 1 halaman).
  3. Ukuran file main.js sebesar 5 KB yang mana 3 KB untuk halaman utama dan 2 KB untuk halaman detail.

Alangkah bagusnya jika kita bisa melepas halaman detail sebesar 2 KB untuk sementara dan membiarkan halaman utama 3 KB untuk di taruh di file main.js. Kenapa? Karena pengguna mengakses halaman utama dan website hanya perlu memuat kode 3 KB. Kemudian, pada saat menampilkan halaman detail barulah dimuat kode 2 KB tadi.

Di sinilah peran dari Dynamic import untuk memuat modul yang bersifat kondisional atau sesuai permintaan.

Cara Deklarasi Dynamic import

Cara deklarasi nya seperti ini:

import('./detailPage.js').then(module => {
    module.default();
});

Atau bisa menggunakan async await function karena dynamic import bersifat Promise.

(async () => {
    const detailPage = await import('./detailPage.js');
    module.default();
})();

Apakah saya sudah bisa pakai dynamic import? Sudah bisa, silakan akses caniuse.com untuk dynamic import.

Referensi