Hapus kode yang tidak digunakan

Houssein Djirdeh

Registry seperti npm telah mengubah dunia JavaScript menjadi lebih baik dengan mengizinkan siapa saja mendownload dan menggunakan lebih dari setengah juta paket publik. Tetapi kita sering menyertakan {i>library<i} 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 Data Web Inti

Dengan menghapus kode yang tidak digunakan, Anda dapat meningkatkan Data Web Inti situs Anda. Largest Contentful Paint, misalnya, dapat terpengaruh oleh kode yang tidak digunakan jika aset besar yang tidak perlu bersaing untuk bandwidth dengan resource lain. LCP juga dapat terpengaruh jika aset JavaScript berukuran besar yang merender markup hanya pada 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 harus didownload, diuraikan, dikompilasi, lalu dieksekusi. Kode yang tidak digunakan dapat menyebabkan penundaan yang tidak perlu pada 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 Network
3. Centang kotak Disable cache.
4. Muat ulang halaman.

Tab Cakupan di DevTools juga memberi tahu Anda jumlah 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 jumlah kode yang tidak terpakai yang dikirimkan bersama aplikasi Anda.

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

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

Meskipun webpack biasanya digunakan untuk membuat aplikasi web satu halaman, pemaket lain, seperti Parcel dan Rollup, juga memiliki alat visualisasi yang dapat digunakan untuk menganalisis paket.

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

Visualisasi ini menunjukkan bagian mana dari paket Anda yang lebih besar daripada yang lain, sehingga Anda dapat lebih memahami jumlah dan ukuran library yang diimpor 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 beberapa 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';

Untuk paket yang tampak misterius yang Anda yakin tidak digunakan di mana pun, mundur sejenak dan lihat dependensi level teratas mana yang menggunakannya. Cobalah mencari cara untuk mengimpor hanya komponen yang Anda butuhkan darinya. Jika Anda tidak menggunakan library, hapus library tersebut. Jika library tidak diperlukan untuk pemuatan halaman awal, pertimbangkan untuk melakukan pemuatan lambat.

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

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. Membangun solusi kustom atau memanfaatkan alternatif yang lebih ringan harus selalu menjadi opsi yang patut dipertimbangkan. Namun, penting untuk mempertimbangkan kompleksitas dan upaya yang diperlukan untuk salah satu strategi ini sebelum menghapus library sepenuhnya dari aplikasi Anda.