Registry seperti npm memiliki mengubah dunia JavaScript menjadi lebih baik dengan memungkinkan siapa pun untuk mendownload dan menggunakan lebih dari setengah juta paket publik. Tapi kita sering menyertakan library yang tidak sepenuhnya kita gunakan. Untuk memperbaiki masalah ini, analisis paket Anda untuk mendeteksi kode yang tidak digunakan, lalu menghapus library yang tidak digunakan dan tidak diperlukan.
Dampak pada Core Web Vitals
Dengan menghapus kode yang tidak digunakan, Anda dapat meningkatkan Core Web Vitals. Largest Contentful Paint, Misalnya, dapat dipengaruhi oleh kode yang tidak digunakan saat aset besar yang tidak perlu bersaing memperebutkan {i>bandwidth<i} dengan sumber daya lain. LCP juga dapat terpengaruh jika Aset JavaScript yang merender markup hanya pada klien berisi referensi tentang kandidat LCP dengan menunda kapan resource ini dapat dimuat.
Kode yang tidak digunakan juga dapat memengaruhi Interaction to Next Paint (INP), karena bahkan JavaScript yang tidak digunakan harus diunduh, diuraikan, dikompilasi, telah dijalankan. Kode yang tidak digunakan dapat menyebabkan penundaan yang tidak perlu dalam pemuatan resource waktu, penggunaan memori, dan aktivitas thread utama yang berkontribusi terhadap kualitas halaman responsivitas.
Panduan ini menjelaskan cara menganalisis codebase proyek Anda untuk kode yang tidak digunakan, dan menawarkan strategi untuk memangkas kode yang tidak terpakai dari aset JavaScript yang Anda kirimi pengguna Anda dalam proses produksi.
Menganalisis paket Anda
DevTools bisa menampilkan ukuran semua permintaan jaringan:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Centang kotak Disable cache.
- Muat ulang halaman.
Tab Cakupan di DevTools juga memberi tahu Anda seberapa banyak kode CSS dan JS di aplikasi yang tidak digunakan.
Dengan menentukan konfigurasi Lighthouse lengkap melalui Node CLI, Anda dapat menjalankan audit Kurangi JavaScript yang tidak digunakan untuk melacak berapa banyak kode tidak terpakai yang dikirim dengan lamaran Anda/
Jika Anda menggunakan webpack sebagai pemaket, Penganalisis Paket Webpack dapat membantu Anda menyelidiki apa yang membentuk paket tersebut. Sertakan plugin dalam file konfigurasi webpack seperti plugin lainnya:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Meskipun webpack umum digunakan untuk membangun aplikasi web satu halaman, pemaket, seperti Parcel dan Gabungan, juga memiliki alat visualisasi yang dapat yang dapat digunakan untuk menganalisis paket Anda.
Memuat ulang aplikasi dengan menyertakan plugin ini menampilkan peta hierarki yang dapat di-zoom dari seluruh paket Anda.
Visualisasi ini menunjukkan bagian mana dari paket Anda yang lebih besar dari yang lain, sehingga Anda bisa lebih memahami jumlah dan ukuran perpustakaan impor aplikasi Anda. Hal ini dapat membantu mengidentifikasi apakah Anda menggunakan {i>password<i} yang tidak atau library yang tidak diperlukan.
Menghapus library yang tidak digunakan
Pada gambar peta hierarki sebelumnya, terdapat beberapa paket dalam satu
@firebase. Jika situs Anda hanya memerlukan komponen database firebase,
perbarui impor untuk mengambil library tersebut:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Untuk paket yang tampak misterius dan Anda yakin sedang tidak digunakan di mana saja, mundur selangkah dan lihat mana dependensi tingkat atas Anda yang menggunakannya. Cobalah untuk menemukan cara untuk hanya mengimpor komponen yang Anda butuhkan darinya. Jika Anda tidak menggunakan library, hapus library tersebut. Jika library tidak diperlukan untuk pemuatan halaman awal, pertimbangkan untuk menggunakan pemuatan lambat anotasi.
Jika Anda menggunakan webpack, lihat daftar plugin yang secara otomatis menghapus kode yang tidak digunakan dari library populer.
Menghapus library yang tidak diperlukan
Tidak semua library dapat dibagi menjadi bagian-bagian dan diimpor secara selektif. Dalam skenario ini, pertimbangkan apakah Anda dapat menghapus library sepenuhnya. Membangun solusi khusus atau memanfaatkan alternatif yang lebih ringan harus selalu pilihan yang layak dipertimbangkan. Namun, penting untuk mempertimbangkan kompleksitas dan upaya yang diperlukan untuk salah satu strategi ini sebelum menghapus sepenuhnya dari aplikasi Anda.