Mengurangi payload JavaScript dengan pemisahan kode

Houssein Djirdeh

Sebagian besar halaman web dan aplikasi terdiri dari banyak bagian yang berbeda. Daripada mengirim semua JavaScript yang membentuk aplikasi segera setelah halaman pertama dimuat, memisahkan 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 performa situs terlebih dahulu sebelum mencoba menambahkan pengoptimalan apa pun.

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

JavaScript sebesar 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 hanya menggunakan sebagian kecilnya adalah kesalahan umum.

Optimalkan

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 mengimpor metode sortBy dari lodash, bukan seluruh library
4. Mendownload kode untuk pengurutan hanya saat pengguna mengklik tombol

Opsi 1 dan 2 adalah metode yang sangat sesuai untuk mengurangi ukuran paket (dan mungkin akan paling masuk akal untuk aplikasi yang sebenarnya). Namun, hal tersebut tidak digunakan dalam tutorial ini untuk tujuan pengajaran 😈.

Opsi 3 dan 4 membantu meningkatkan performa aplikasi ini. Beberapa bagian berikutnya dalam codelab ini akan membahas langkah-langkah ini. Seperti tutorial coding lainnya, selalu coba tulis kode sendiri, bukan menyalin dan menempelkan.

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";

Dan perbarui cara nilai diurutkan:

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 Jaringan sekali lagi.

Untuk aplikasi ini, ukuran paket dikurangi lebih dari 4X dengan sedikit pekerjaan, tetapi masih ada banyak ruang untuk peningkatan.

Pemisahan kode

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

Satu paket yang digunakan dalam aplikasi ini dapat dibagi menjadi dua bagian terpisah:

• Satu yang bertanggung jawab atas kode yang membentuk rute awal kita
• Potongan sekunder yang berisi kode pengurutan

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

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

import sortBy from "lodash.sortby";

Dan 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) untuk menyertakan kemampuan untuk mengimpor modul secara dinamis. webpack telah menyertakan dukungan untuk ini dan mengikuti sintaksis yang sama yang ditetapkan oleh proposal.

import() menampilkan promise dan saat di-resolve, modul yang dipilih akan disediakan yang dibagi menjadi beberapa bagian terpisah. Setelah modul ditampilkan, module.default 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 promise, .catch() digunakan untuk menangani kasus saat promise ditolak karena 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 perhatikan kembali panel Jaringan. Hanya paket awal kecil yang didownload segera setelah aplikasi dimuat.

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

Perhatikan bahwa angka masih diurutkan.

Kesimpulan

Pemisahan kode dan pemuatan lambat dapat menjadi teknik yang sangat berguna untuk memangkas ukuran paket awal aplikasi Anda, dan hal ini dapat secara langsung menghasilkan 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 memuat lambat modul kode tertentu, penting untuk mempertimbangkan pengalaman pengguna dengan koneksi jaringan yang lebih lemah. Membagi dan memuat sebagian besar kode yang sangat besar saat pengguna mengirimkan tindakan dapat membuat aplikasi tampak berhenti berfungsi, jadi pertimbangkan untuk menampilkan indikator pemuatan.

Memuat lambat modul node pihak ketiga

Memuat lambat dependensi pihak ketiga di aplikasi Anda tidak selalu merupakan pendekatan terbaik dan bergantung pada tempat Anda menggunakannya. Biasanya, dependensi pihak ketiga dibagi menjadi paket vendor terpisah yang dapat di-cache karena tidak sering diupdate. Baca selengkapnya tentang cara SplitChunksPlugin dapat membantu Anda melakukannya.

Pemuatan lambat dengan framework JavaScript

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

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

Meskipun memahami cara kerja impor dinamis itu berguna, selalu gunakan metode yang direkomendasikan oleh framework/library Anda untuk memuat lambat 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 Memuat ulang bagian penting.

Pemuatan lambat lebih dari sekadar kode

Gambar dapat menjadi bagian penting dari aplikasi. Pemuatan lambat yang berada di bawah fold, atau di luar area pandang perangkat, dapat mempercepat situs. Baca selengkapnya tentang hal ini di panduan Lazysizes.