Mengurangi payload JavaScript dengan pemisahan kode

Houssein Djirdeh

Sebagian besar laman web dan aplikasi terdiri dari banyak bagian yang berbeda. Daripada mengirim semua JavaScript yang membentuk aplikasi segera setelah halaman pertama dimuat, membagi JavaScript menjadi beberapa bagian akan meningkatkan performa halaman.

Codelab ini menunjukkan cara menggunakan pemisahan kode untuk meningkatkan performa aplikasi sederhana yang mengurutkan tiga angka.

Ukur

Seperti biasa, penting untuk mengukur terlebih dahulu seberapa baik performa situs sebelum mencoba menambahkan pengoptimalan apa pun.

1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Network
4. Centang kotak Disable cache.
5. Muat ulang aplikasi.

JavaScript senilai 71,2 KB hanya untuk mengurutkan beberapa angka dalam aplikasi sederhana. What gives?

Dalam kode sumber (src/index.js), library lodash diimpor dan digunakan dalam aplikasi ini. Lodash menyediakan banyak fungsi utilitas yang berguna, tetapi hanya satu metode dari paket yang digunakan di sini. Menginstal dan mengimpor seluruh dependensi pihak ketiga yang penggunaannya adalah sebagian kecil merupakan kesalahan umum.

Pengoptimalan

Ada beberapa cara untuk memangkas ukuran paket:

1. Menulis metode pengurutan kustom, bukan mengimpor library pihak ketiga
2. Gunakan metode Array.prototype.sort() bawaan untuk mengurutkan secara numerik
3. Hanya impor metode sortBy dari lodash dan bukan seluruh library
4. Download kode untuk mengurutkan hanya saat pengguna mengklik tombol

Opsi 1 dan 2 adalah metode yang sangat tepat untuk mengurangi ukuran paket (dan mungkin paling sesuai untuk aplikasi yang sebenarnya). Namun, hal tersebut tidak digunakan dalam tutorial ini untuk tujuan mengajar 👀.

Opsi 3 dan 4 membantu meningkatkan performa aplikasi ini. Beberapa bagian selanjutnya dari codelab ini akan membahas langkah-langkah ini. Seperti tutorial coding lainnya, selalu cobalah menulis kode sendiri, bukan menyalin dan menempel.

Hanya impor yang Anda butuhkan

Beberapa file perlu diubah agar hanya mengimpor satu metode dari lodash. Untuk memulai, ganti dependensi ini di package.json:

"lodash": "^4.7.0",

dengan ini:

"lodash.sortby": "^4.7.0",

Sekarang di src/index.js, impor modul khusus ini:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

Lalu, perbarui cara pengurutan nilai:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Muat ulang aplikasi, buka DevTools, dan lihat panel Network sekali lagi.

Untuk aplikasi ini, ukuran paket dikurangi lebih dari 4X lipat dengan sedikit upaya, tetapi masih ada banyak peningkatan yang perlu dilakukan.

Pemisahan kode

webpack adalah salah satu pemaket modul open source paling populer yang digunakan saat ini. Singkatnya, Google Play menggabungkan semua modul JavaScript (serta aset lainnya) yang membentuk aplikasi web menjadi file statis yang dapat dibaca oleh browser.

Paket tunggal yang digunakan dalam aplikasi ini dapat dibagi menjadi dua bagian terpisah:

• Yang bertanggung jawab atas kode yang membentuk rute awal
• Potongan sekunder yang berisi kode penyortiran kita

Dengan penggunaan impor dinamis, potongan sekunder dapat dimuat dengan lambat,atau dimuat sesuai permintaan. Dalam aplikasi ini, kode yang membentuk potongan kode hanya dapat dimuat saat pengguna menekan tombol.

Mulailah dengan menghapus impor tingkat atas untuk metode pengurutan di src/index.js:

import sortBy from "lodash.sortby";

Kemudian, impor dalam pemroses peristiwa yang diaktifkan saat tombol ditekan:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Fitur import() adalah bagian dari proposal (saat ini berada di tahap 3 proses TC39) guna menyertakan kemampuan untuk mengimpor modul secara dinamis. webpack telah menyertakan dukungan untuk hal ini dan mengikuti sintaksis yang sama yang ditetapkan oleh proposal.

import() menampilkan promise, dan setelah di-resolve, modul yang dipilih akan disediakan dan dibagi menjadi bagian terpisah. Setelah modul ditampilkan, module.default akan digunakan untuk mereferensikan ekspor default yang disediakan oleh lodash. Promise dirantai dengan .then lain yang memanggil metode sortInput untuk mengurutkan tiga nilai input. Di akhir rantai janji tersebut, .catch() digunakan untuk menangani kasus saat promise ditolak karena terjadi error.

Hal terakhir yang perlu dilakukan adalah menulis metode sortInput di akhir file. Ini harus berupa fungsi yang menampilkan fungsi yang mengambil metode yang diimpor dari lodash.sortBy. Fungsi bertingkat kemudian dapat mengurutkan tiga nilai input dan memperbarui DOM.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Memantau

Muat ulang aplikasi untuk terakhir kalinya dan pantau kembali panel Network. Hanya paket awal kecil yang didownload segera setelah aplikasi dimuat.

Setelah tombol ditekan untuk mengurutkan angka input, potongan yang berisi kode pengurutan akan diambil dan dieksekusi.

Perhatikan bagaimana angka-angka itu masih diurutkan.

Kesimpulan

Pemisahan kode dan pemuatan lambat dapat menjadi teknik yang sangat berguna untuk memangkas ukuran paket awal aplikasi, dan hal ini secara langsung dapat mempercepat waktu pemuatan halaman yang jauh lebih cepat. Namun, ada beberapa hal penting yang perlu dipertimbangkan sebelum menyertakan pengoptimalan ini dalam aplikasi Anda.

UI pemuatan lambat

Saat lambat memuat modul kode tertentu, penting untuk mempertimbangkan pengalaman yang akan dirasakan pengguna dengan koneksi jaringan yang lebih lemah. Memisahkan dan memuat potongan kode yang sangat besar saat pengguna mengirimkan tindakan dapat membuat aplikasi tampak berhenti berfungsi. Jadi, pertimbangkan untuk menampilkan semacam indikator pemuatan.

Modul node pihak ketiga pemuatan lambat

Hal tersebut tidak selalu menjadi pendekatan terbaik untuk pemuatan lambat dependensi pihak ketiga di aplikasi Anda dan bergantung pada tempat Anda menggunakannya. Biasanya, dependensi pihak ketiga dibagi menjadi paket vendor terpisah yang dapat di-cache karena dependensi tidak sering diperbarui. Baca selengkapnya tentang cara SplitChunksPlugin dapat membantu Anda melakukan ini.

Pemuatan lambat dengan framework JavaScript

Banyak framework dan library populer yang menggunakan webpack menyediakan abstraksi untuk menjadikan pemuatan lambat lebih mudah daripada menggunakan impor dinamis di tengah aplikasi Anda.

• Modul pemuatan lambat dengan Angular
• Pemisahan kode dengan Router React
• Pemuatan lambat dengan Router Vue

Meskipun ada baiknya untuk memahami cara kerja impor dinamis, selalu gunakan metode yang direkomendasikan oleh framework/library untuk menjalankan lazy load pada modul tertentu.

Pramuat dan pengambilan data

Jika memungkinkan, manfaatkan petunjuk browser seperti <link rel="preload"> atau <link rel="prefetch"> untuk mencoba memuat modul penting lebih cepat. webpack mendukung kedua petunjuk tersebut melalui penggunaan komentar ajaib dalam pernyataan impor. Hal ini dijelaskan secara lebih mendetail dalam panduan Melakukan pramuat bagian penting.

Pemuatan lambat lebih dari kode

Gambar dapat membentuk bagian penting dari suatu aplikasi. Memuat lambat iklan yang berada di paruh bawah, atau di luar area tampilan perangkat, dapat mempercepat situs. Baca selengkapnya tentang hal ini di panduan Lazysizes.