Cara Mengurangi Ukuran Bundle JavaScript Anda Sebesar 70%

Sebagian besar aplikasi web mengirimkan terlalu banyak kode. Rata-rata halaman web memuat 1,7 MB JavaScript. Pengembang hanya menggunakan sekitar 35% dari kode yang mereka terapkan.

Bundle yang kecil meningkatkan Core Web Vitals Anda. Anda akan mendapatkan skor Largest Contentful Paint yang lebih cepat dan Time to Interactive yang lebih cepat.

Ikuti 10 langkah ini untuk memperkecil ukuran bundle Anda:

  • Tree shaking: Menghapus kode yang tidak digunakan. Gunakan sintaks ES Module agar ini berfungsi.
  • Code splitting: Memecah kode Anda menjadi bagian-bagian yang lebih kecil.
  • Dynamic imports: Memuat kode hanya saat pengguna membutuhkannya.
  • Image optimization: Gunakan transformasi berbasis URL alih-alih pustaka yang besar.
  • Dependency auditing: Tukar pustaka yang berat dengan yang lebih ringan.
  • Minification: Memperkecil file kode Anda.
  • Compression: Gunakan Brotli untuk hasil yang lebih baik daripada Gzip.
  • Dead code elimination: Menghapus cabang kode yang tidak dapat dijangkau.
  • Lazy loading: Menunda pemuatan komponen yang tidak kritis.
  • Polyfill pruning: Hanya kirimkan polyfill yang dibutuhkan pengguna Anda.

Tiga teknik bekerja paling baik jika digabungkan. Lazy loading, pemangkasan polyfill, dan eliminasi kode mati dapat mengurangi ukuran Anda sebesar 15-30%.

Audit dependensi Anda sebelum menginstalnya. Gunakan npx bundle-phobia untuk memeriksa ukurannya.

Sebagai contoh: • date-fns (13KB) lebih baik daripada moment.js (67KB). • dayjs (2KB) adalah alternatif yang hebat untuk pemformatan tanggal. • Gunakan lodash-es alih-alih pustaka lodash lengkap.

Pantau kemajuan Anda dengan target berikut: • Total ukuran JS: Targetkan di bawah 120 KB. • LCP: Targetkan di bawah 2,5 detik. • TTI: Targetkan di bawah 3,5 detik.

Hindari kesalahan berikut: • Menerapkan build pengembangan alih-alih build produksi. • Mengimpor seluruh pustaka padahal Anda hanya membutuhkan satu fungsi. • Lupa mengaktifkan kompresi Brotli pada server Anda.

Jika Anda menggunakan tree shaking, code splitting, dan audit dependensi, Anda dapat mengurangi payload sebesar 50-70% dalam satu sprint.

Sumber: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g