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.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Centang kotak Nonaktifkan cache.
- 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:
- Menulis metode pengurutan kustom, bukan mengimpor library pihak ketiga
- Gunakan metode
Array.prototype.sort()
bawaan untuk mengurutkan secara numerik - Hanya impor metode
sortBy
darilodash
, bukan seluruh library - 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 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.