Bedanya Static dan Dynamic import

Buat yang pernah pakai ES Modules pasti 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.

Deklarasi Static Import

import berperan untuk memanggil fungsi yang sudah kita export. Untuk menggunakan import, kita perlu menyisipkan atribut type="module" di tag script. Mari perhatikan contoh cara deklarasi static import

<!-- Set type="module" on script tag in html file -->
<script type="module" src="app.js">

// app.js
import Home from "./components/Home.js";

// components/Home.js
export default function () {
    return document.querySelector('main').innerHTML = `<h1>This is home page`;
}

Static dan Dynamic Import

import memiliki dua mode yakni statis (static import) dan dinamis (dynamic import).

Static import berperan untuk memuat initial dependencies (dependensi awal) dan tree-shaking.

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

Contoh Kasus Dynamic Import

Website Spongebob berbasis aplikasi satu halaman (Single Page Application) memiliki dua halaman. Halaman pertama memuat daftar karakter kartun Spongebob. Halaman kedua memuat detail karakter kartun Spongebob. Kode halaman utama sebesar 3 KB, kode halaman kedua sebesar 2 KB dan keduanya disimpan dalam file bernama main.js dengan total 5 KB.

Saya berharap kalian paham bahwa dua halaman ini adalah dua konten yang berbeda namun disajikan dalam satu file yakni index.html.

Jika kalian bingung silakan baca definisi Single Page Application

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

Jika dicermati website Spongebob memuat kode halaman pertama dan kedua sebesar 5 KB. Padahal, pengguna mengakses website yang menampilkan halaman pertama sebesar 3 KB.

Alangkah bagusnya jika kita bisa menyajikan kode halaman pertama dan memanggil kode halaman kedua jika pengguna mengakses halaman kedua.

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 kita bisa pakai dynamic import? Bisa, silakan akses caniuse.com untuk melihat dukungan dynamic import.

Module Bundler

Dalam pengembangan aplikasi berbasis JavaScript, Webpack dan Rollup 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 minim dan struktur kode bersih.

Referensi

Jika konten ini bermanfaat, silakan: