Mengurangi payload JavaScript dengan pemisahan kode

Houssein Djirdeh

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Catatan: Codelab ini menggunakan Chrome DevTools. Download Chrome jika Anda belum memilikinya.

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

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

Ukur

Catatan: Karena webpack digunakan dalam aplikasi ini, setiap perubahan yang dilakukan pada kode akan memicu build baru yang dapat memerlukan waktu beberapa detik. Setelah selesai, Anda akan melihat perubahan tercermin di aplikasi.

Seperti biasa, penting untuk mengukur terlebih dahulu seberapa baik kinerja situs web sebelum mencoba menambahkan pengoptimalan.

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 Jaringan.
4. Centang kotak Disable cache.
5. Muat ulang aplikasi.

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

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

Optimalkan

Ada beberapa cara 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. Impor metode sortBy hanya dari lodash, bukan seluruh library
4. Download kode untuk mengurutkan hanya ketika pengguna mengklik tombol

Opsi 1 dan 2 adalah metode yang sangat tepat untuk mengurangi ukuran paket (dan mungkin paling masuk akal untuk aplikasi nyata). Namun, itu adalah tidak digunakan dalam tutorial ini untuk keperluan pengajaran ]<.

Catatan: Konsep menghapus kode yang tidak digunakan dibahas secara lebih mendetail dalam panduan terpisah.

Opsi 3 dan 4 membantu meningkatkan kinerja aplikasi ini. Tujuan beberapa bagian berikutnya dari codelab ini akan membahas langkah-langkah ini. Seperti {i>coding<i} lainnya tutorial ini, selalu cobalah untuk menulis kode Anda sendiri, bukan menyalin dan menempelnya.

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

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

Untuk aplikasi ini, ukuran paket berkurang lebih dari 4X dengan sangat sedikit bekerja, tetapi masih ada banyak hal yang harus diperbaiki.

Pemisahan kode

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

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

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

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

Mulailah 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 dalam tahap 3 dari proses TC39) untuk menyertakan kemampuan mengimpor modul secara dinamis. webpack telah menyertakan dukungan untuk ini dan mengikuti {i>syntax<i} yang sama dengan oleh proposal.

Catatan: Baca selengkapnya tentang cara kerja impor dinamis di artikel Pembaruan Web ini.

import() menampilkan promise, dan saat terselesaikan, promise yang dipilih disediakan yang dibagi menjadi potongan terpisah. Setelah modul ditampilkan, module.default digunakan untuk mereferensikan default {i>export<i} yang disediakan oleh lodash. Promise dirantai dengan .then lain yang memanggil metode sortInput untuk mengurutkan tiga nilai input. Pada akhirnya, rantai janji, .catch() digunakan untuk menangani kasus saat promise ditolak karena terjadi error.

Perhatian: Dalam aplikasi produksi, selalu tangani error impor dinamis dengan tepat. Pesan peringatan sederhana yang mirip dengan yang digunakan di sini mungkin tidak memberikan pengalaman pengguna terbaik untuk memberi tahu pengguna bahwa ada sesuatu yang gagal.

Catatan: Anda mungkin melihat error lint yang bertuliskan: bash Parsing error: 'import' and 'export' may only appear at the top level. Hal ini disebabkan karena sintaksis impor dinamis masih berada dalam tahap proposal dan belum diselesaikan. Meskipun webpack sudah mendukungnya, setelan untuk ESLint (utilitas lint JavaScript) yang digunakan oleh Glitch belum diupdate untuk menyertakan sintaksis ini, tetapi masih berfungsi.

Hal terakhir yang perlu dilakukan adalah menulis metode sortInput di akhir file. Ini harus berupa fungsi yang menampilkan fungsi yang menggunakan metode yang diimpor dari lodash.sortBy. Fungsi tersarang 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 terus Jaringan kembali ke panel aplikasi. Hanya paket awal kecil yang didownload segera setelah aplikasi memuat.

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

Perhatikan bagaimana angka-angka masih diurutkan!

Kesimpulan

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

UI pemuatan lambat

Saat menjalankan lambat saat memuat modul kode tertentu, penting untuk mempertimbangkan bagaimana adalah untuk pengguna dengan koneksi jaringan yang lebih lemah. Membagi dan memuat potongan kode yang sangat besar ketika pengguna mengirim tindakan dapat membuatnya sepertinya aplikasi tersebut telah berhenti berfungsi, jadi pertimbangkan untuk menunjukkan indikator pemuatan atau semacamnya.

Pemuatan lambat modul node pihak ketiga

Tidak selalu merupakan pendekatan terbaik untuk memuat dependensi pihak ketiga dengan lambat di aplikasi dan itu tergantung di mana Anda menggunakannya. Biasanya, pihak ketiga dependensi dibagi menjadi paket vendor terpisah yang dapat di-cache karena dan tidak terlalu sering diperbarui. Baca selengkapnya tentang bagaimana SplitChunksPlugin dapat membantu Anda melakukan hal 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.

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

Meskipun berguna untuk memahami cara kerja impor dinamis, selalu gunakan metode yang direkomendasikan oleh framework/library Anda untuk memuat modul tertentu dengan lambat.

Pramuat dan pengambilan data

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

Pemuatan lambat lebih dari sekadar kode

Gambar dapat menjadi bagian penting dari sebuah aplikasi. Pemuatan lambat untuk yang berada di paruh bawah, atau di luar area tampilan perangkat, dapat mempercepat situs. {i>Read<i} selengkapnya tentang hal ini dalam Lazysizes.