Bundle yang besar membuat aplikasi web lambat dimuat. Tree shaking membantu menghapus kode yang tidak digunakan agar ukuran bundle lebih kecil. Praktik ini sangat penting dalam pengembangan frontend modern yang penuh library. Dengan bundle yang ringan, performa dan SEO meningkat.
Pastikan modul mendukung tree shaking
Tree shaking bekerja optimal pada modul ES. Gunakan import spesifik agar bundler bisa membuang bagian yang tidak dipakai. Hindari import seluruh library jika hanya butuh beberapa fungsi.
- Gunakan
import { Button } from "library"bukanimport *. - Pastikan build menggunakan mode production.
- Hindari side effects yang menghalangi optimasi.
Konfigurasi bundler yang tepat
Pastikan bundler seperti Webpack, Vite, atau Rollup diatur untuk tree shaking. Tandai file yang punya side effects dengan benar agar bundler tidak membuang kode penting. Gunakan plugin analisis bundle untuk melihat hasil optimasi.
Jika ada library besar yang tidak bisa di-tree shake, pertimbangkan alternatif yang lebih ringan atau gunakan lazy loading untuk memuatnya hanya saat diperlukan.
Dampak pada pengalaman pengguna
Bundle lebih kecil berarti waktu muat lebih cepat dan interaksi lebih responsif. Pengguna merasakan aplikasi lebih ringan, dan core web vitals meningkat. Tree shaking adalah langkah sederhana namun berdampak besar untuk kualitas frontend.