Mengurangi payload JavaScript dengan pemisahan kode

Houssein Djirdeh

Jeremy Wagner

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

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

Mengapa pemisahan kode bermanfaat?

Pemisahan kode adalah teknik yang berupaya meminimalkan waktu startup. Jika kami mengirimkan lebih sedikit JavaScript saat startup, kita dapat membuat aplikasi menjadi interaktif lebih cepat dengan meminimalkan tugas thread utama selama periode penting ini.

Dalam hal Core Web Vitals, mengurangi payload JavaScript yang didownload saat startup akan berkontribusi pada waktu Interaksi ke Next Paint (INP) yang lebih baik. Alasan di balik ini adalah, dengan mengosongkan thread utama, aplikasi dapat merespons input pengguna lebih cepat dengan mengurangi biaya startup terkait penguraian, kompilasi, dan eksekusi JavaScript.

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

Ukur

Lighthouse menampilkan audit yang gagal ketika sejumlah besar waktu dibutuhkan untuk mengeksekusi semua JavaScript pada halaman.

Bagi paket JavaScript agar hanya mengirim kode yang diperlukan untuk rute awal saat saat pengguna memuat aplikasi. Hal ini meminimalkan jumlah skrip yang perlu diurai dan dikompilasi, yang menghasilkan waktu muat halaman yang lebih cepat.

Pemaket modul populer seperti webpack, Parcel, dan Dengan Gabungan, Anda dapat membagi paket menggunakan impor dinamis. Misalnya, perhatikan cuplikan kode berikut yang menunjukkan contoh Metode someFunction yang diaktifkan saat formulir dikirim.

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 dimodifikasi untuk menggunakan impor dinamis untuk mengambilnya hanya jika formulir dikirim 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 saat diperlukan setelah pengiriman formulir. Untuk meningkatkan performa halaman lebih lanjut, pramuat bagian penting untuk memprioritaskan dan mengambilnya lebih cepat.

Meskipun cuplikan kode sebelumnya adalah contoh sederhana, pemuatan lambat pihak ketiga dependensi bukanlah pola umum dalam aplikasi yang lebih besar. Biasanya, ketiga dependensi pihak ketiga dipecah menjadi paket vendor terpisah yang dapat di-cache karena tidak terlalu sering diperbarui. Anda dapat membaca lebih lanjut tentang bagaimana SplitChunksPlugin dapat membantu Anda melakukan hal ini.

Memisahkan tingkat komponen atau rute saat menggunakan framework sisi klien pendekatan yang lebih sederhana untuk menjalankan lambat saat memuat berbagai bagian aplikasi. Banyak framework populer yang menggunakan webpack menyediakan abstraksi untuk membuat pemuatan lambat lebih mudah daripada mempelajari konfigurasinya sendiri.