Mengurangi payload JavaScript dengan pemisahan kode

Houssein Djirdeh

Jeremy Wagner

Tidak ada yang suka menunggu. Lebih dari 50% pengguna akan meninggalkan situs jika waktu pemuatannya lebih dari 3 detik.

Mengirim payload JavaScript yang besar sangat memengaruhi kecepatan situs. Daripada mengirimkan semua JavaScript ke pengguna segera setelah halaman pertama aplikasi dimuat, bagi paket Anda menjadi beberapa bagian dan hanya kirim yang diperlukan di awal.

Mengapa pemisahan kode bermanfaat?

Pemisahan kode adalah teknik yang berupaya meminimalkan waktu startup. Jika jumlah JavaScript berkurang saat startup, aplikasi dapat menjadi interaktif lebih cepat dengan meminimalkan pekerjaan thread utama selama periode penting ini.

Untuk Data Web Inti, mengurangi payload JavaScript yang didownload saat memulai akan berkontribusi pada waktu First Input Delay (FID) dan Interaction to Next Paint (INP) yang lebih baik. Alasan di balik ini adalah bahwa dengan mengosongkan thread utama, aplikasi akan mampu merespons input pengguna secara lebih cepat dengan mengurangi biaya startup terkait eksekusi, kompilasi, dan penguraian JavaScript.

Bergantung pada arsitektur situs Anda—terutama jika situs Anda sangat bergantung pada rendering sisi klien—mengurangi ukuran payload JavaScript yang bertanggung jawab untuk rendering markup dapat meningkatkan waktu Largest Contentful Paint (LCP). Hal ini dapat terjadi saat resource LCP terlambat ditemukan oleh browser hingga setelah markup sisi klien selesai, atau saat thread utama terlalu sibuk untuk merender elemen LCP tersebut. Kedua skenario dapat menunda waktu LCP untuk halaman.

Ukur

Lighthouse menampilkan audit yang gagal jika dibutuhkan waktu yang cukup lama untuk menjalankan semua JavaScript di halaman.

Memisahkan paket JavaScript agar hanya mengirim kode yang diperlukan untuk rute awal saat pengguna memuat aplikasi. Hal ini meminimalkan jumlah skrip yang perlu diurai dan dikompilasi, sehingga mempercepat waktu pemuatan halaman.

Pemaket modul populer seperti webpack, Parcel, dan Rollup memungkinkan Anda membagi paket menggunakan impor dinamis. Misalnya, perhatikan cuplikan kode berikut yang menunjukkan contoh metode someFunction yang diaktifkan saat formulir dikirimkan.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Di sini, someFunction menggunakan modul yang diimpor dari library tertentu. Jika modul ini tidak digunakan di tempat lain, blok kode dapat diubah untuk menggunakan impor dinamis untuk mengambilnya hanya ketika formulir dikirimkan oleh pengguna.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

Kode yang membentuk modul tidak disertakan ke dalam paket awal dan sekarang dimuat dengan lambat, atau diberikan kepada pengguna hanya jika diperlukan setelah pengiriman formulir. Untuk lebih meningkatkan performa halaman, pramuat bagian penting untuk memprioritaskan dan mengambilnya lebih cepat.

Meskipun cuplikan kode sebelumnya adalah contoh sederhana, dependensi pihak ketiga yang pemuatannya lambat bukanlah pola yang umum di aplikasi yang lebih besar. Biasanya, dependensi pihak ketiga dibagi menjadi paket vendor terpisah yang dapat di-cache karena tidak sering diperbarui. Anda dapat membaca selengkapnya tentang cara SplitChunksPlugin dapat membantu Anda melakukan ini.

Memisahkan pada tingkat rute atau komponen saat menggunakan framework sisi klien adalah pendekatan yang lebih sederhana untuk memuat lambat berbagai bagian aplikasi Anda. Banyak framework populer yang menggunakan webpack menyediakan abstraksi untuk mempermudah pemuatan lambat daripada menyelami konfigurasi sendiri.