Hapus kode yang tidak digunakan

Houssein Djirdeh

Registry seperti npm telah mengubah dunia JavaScript menjadi lebih baik dengan memungkinkan siapa saja mendownload dan menggunakan lebih dari setengah juta paket publik. Namun, kita sering menyertakan library yang tidak sepenuhnya kita gunakan. Untuk memperbaiki masalah ini, analisis paket Anda untuk mendeteksi kode yang tidak digunakan, lalu hapus library yang tidak digunakan dan tidak diperlukan.

Dampak pada Core Web Vitals

Dengan menghapus kode yang tidak digunakan, Anda dapat meningkatkan Data Web Inti situs Anda. Misalnya, Largest Contentful Paint dapat terpengaruh oleh kode yang tidak digunakan saat aset yang tidak perlu besar bersaing untuk bandwidth dengan resource lain. LCP juga dapat terpengaruh jika aset JavaScript besar yang merender markup hanya di klien berisi referensi ke kandidat LCP dengan menunda kapan resource ini dapat dimuat.

Kode yang tidak digunakan juga dapat memengaruhi Interaction to Next Paint (INP), karena JavaScript yang tidak digunakan sekalipun harus didownload, diuraikan, dikompilasi, lalu dieksekusi. Kode yang tidak digunakan dapat menyebabkan penundaan yang tidak perlu dalam waktu pemuatan resource, penggunaan memori, dan aktivitas thread utama yang berkontribusi pada responsivitas halaman yang buruk.

Panduan ini menjelaskan cara menganalisis codebase project untuk menemukan kode yang tidak digunakan, dan menawarkan strategi untuk memangkas kode yang tidak digunakan dari aset JavaScript yang Anda kirimkan kepada pengguna dalam produksi.

Menganalisis paket Anda

DevTools dapat menampilkan ukuran semua permintaan jaringan:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
3. Centang kotak Nonaktifkan cache.
4. Muat ulang halaman.

DevTools menampilkan ukuran file JavaScript.

Tab Cakupan di DevTools juga memberi tahu Anda jumlah kode CSS dan JS di aplikasi yang tidak digunakan.

Tab Cakupan.

Dengan menentukan konfigurasi Lighthouse lengkap melalui Node CLI, Anda dapat menjalankan audit Kurangi JavaScript yang tidak digunakan untuk melacak jumlah kode yang tidak digunakan yang dikirimkan dengan aplikasi Anda.

Laporan Kurangi JavaScript yang tidak digunakan.

Jika Anda menggunakan webpack sebagai bundler, Webpack Bundle Analyzer dapat membantu Anda menyelidiki komponen yang membentuk paket. Sertakan plugin dalam file konfigurasi webpack Anda seperti plugin lainnya:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

Meskipun webpack biasanya digunakan untuk mem-build aplikasi web satu halaman, penggabungan lainnya, seperti Parcel dan Rollup, juga memiliki alat visualisasi yang dapat Anda gunakan untuk menganalisis paket.

Memuat ulang aplikasi dengan menyertakan plugin ini akan menampilkan peta hierarki yang dapat diperbesar dari seluruh paket Anda.

Tampilan peta hierarki Webpack Bundle Analyzer.

Visualisasi ini menunjukkan bagian mana dari paket Anda yang lebih besar daripada bagian lain, sehingga Anda dapat lebih memahami jumlah dan ukuran library yang diimpor oleh aplikasi Anda. Hal ini dapat membantu mengidentifikasi apakah Anda menggunakan library yang tidak digunakan atau tidak diperlukan.

Menghapus library yang tidak digunakan

Pada gambar peta hierarki sebelumnya, ada cukup banyak paket dalam satu domain @firebase. Jika situs Anda hanya memerlukan komponen database firebase, update impor untuk mengambil library tersebut:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Catatan: Proses ini jauh lebih rumit untuk aplikasi yang lebih besar.

Untuk paket yang tampak misterius dan Anda yakin tidak digunakan di mana pun, mundur sejenak dan lihat dependensi tingkat teratas mana yang menggunakannya. Coba temukan cara untuk hanya mengimpor komponen yang Anda perlukan darinya. Jika Anda tidak menggunakan library, hapus library tersebut. Jika library tidak diperlukan untuk pemuatan halaman awal, pertimbangkan untuk memuat lambat library tersebut.

Jika Anda menggunakan webpack, lihat daftar plugin yang otomatis menghapus kode yang tidak digunakan dari library populer.

Coba: Hapus kode yang tidak digunakan.

Menghapus library yang tidak diperlukan

Tidak semua library dapat dibagi menjadi beberapa bagian dan diimpor secara selektif. Dalam skenario ini, pertimbangkan apakah Anda dapat menghapus library sepenuhnya. Membuat solusi kustom atau memanfaatkan alternatif yang lebih ringan harus selalu menjadi opsi yang layak dipertimbangkan. Namun, penting untuk mempertimbangkan kompleksitas dan upaya yang diperlukan untuk salah satu strategi ini sebelum menghapus library sepenuhnya dari aplikasi Anda.