𝗣𝗲𝗻𝗷𝗲𝗹𝗮𝘀𝗮𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴
Anda menulis aplikasi React atau Angular menggunakan banyak file. Anda memiliki komponen, layanan, dan pustaka. Pengorganisasian ini membantu Anda.
Browser tidak peduli dengan folder Anda. Jika Anda memuat 200 file, browser akan melakukan 200 permintaan jaringan. Hal ini membuat aplikasi Anda lambat.
Bundler menyelesaikan masalah ini. Sebuah bundler mengambil kode, import, dan modul Anda. Ia menggabungkannya menjadi satu atau beberapa file kecil. Hal ini membuat proses pemuatan menjadi efisien.
Bundler modern melakukan lebih dari sekadar menggabungkan file:
• Minifikasi: Menghapus spasi tambahan dan komentar. Memperpendek nama variabel agar ukuran file lebih kecil. • Tree shaking: Menghapus kode yang tidak pernah Anda gunakan. Mencabut fungsi yang tidak terpakai dari pustaka. • Code splitting: Memecah kode menjadi potongan-potongan kecil. Browser hanya memuat apa yang dibutuhkan pengguna saat ini.
File yang lebih kecil menghasilkan aplikasi yang lebih cepat.
Ada dua alat utama: Webpack dan Vite.
Webpack membundel seluruh aplikasi Anda sebelum menyajikannya. Ini bekerja dengan baik untuk proyek legacy yang besar. Webpack fleksibel tetapi bisa terasa lambat pada proyek besar.
Vite adalah pilihan modern. Selama pengembangan, Vite menyajikan file secara langsung. Ia hanya memperbarui file yang Anda ubah. Hal ini membuat pembaruan menjadi instan. Untuk produksi, Vite menggunakan Rollup untuk membuat bundel yang cepat.
Perbandingan:
Webpack:
- Kecepatan dev: Lebih lambat
- Konfigurasi: Kompleks
- Terbaik untuk: Proyek legacy besar
Vite:
- Kecepatan dev: Cepat
- Konfigurasi: Sederhana
- Terbaik untuk: Proyek modern baru
Gunakan Vite untuk proyek baru.
Setiap bundler mengikuti tiga langkah:
- Membangun dependency graph: Memetakan bagaimana setiap file terhubung dengan file lainnya.
- Transformasi kode: Mengonversi TypeScript atau JSX menjadi JavaScript biasa.
- Menghasilkan bundel: Menggabungkan dan meminimalkan semuanya ke dalam sebuah folder untuk deployment.
Jaga agar bundel Anda tetap ramping dengan langkah-langkah ini:
• Lazy loading: Memuat komponen hanya saat pengguna menavigasi ke komponen tersebut. • Partial imports: Jangan mengimpor seluruh pustaka. Impor hanya fungsi spesifik yang Anda butuhkan. • Analisis: Gunakan alat untuk melihat apa yang memakan ruang dalam bundel Anda. • Production builds: Selalu deploy production build. Development build terlalu besar.
Bundling membuat aplikasi Anda berkinerja lebih baik dengan memberikan file yang lebih sedikit dan lebih kecil kepada browser.
Sumber: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p