𝗠𝗲𝗻𝘆𝗲𝗱𝗲𝗿𝗵𝗮𝗻𝗮𝗸𝗮𝗻 𝗩𝗶𝘁𝗲
Alat lama seperti Webpack atau CRA bekerja dengan melakukan bundling pada seluruh proyek Anda terlebih dahulu. Mereka membaca setiap file dan menggabungkannya menjadi satu file JavaScript yang besar. Ini berfungsi untuk proyek kecil. Namun, ini gagal untuk proyek besar dengan ribuan modul. Bundle yang besar membutuhkan waktu detik atau menit untuk dibangun. Setiap kali Anda menyimpan file, alat tersebut membangun kembali sebagian besar bagian dari bundle tersebut.
Vite bekerja secara berbeda. Browser modern mendukung ES modules secara native. Vite tidak melakukan bundling pada kode Anda selama pengembangan. Vite menyajikan setiap file sebagai modul terpisah hanya saat browser memintanya.
Bayangkan sebuah restoran prasmanan. Koki memasak setiap hidangan sebelum pintu dibuka. Jika Anda menginginkan satu perubahan kecil, koki harus membuat ulang sebagian besar hidangan prasmanan tersebut. Anda menunggu lama untuk makanan Anda. Inilah cara kerja Webpack.
Sekarang bayangkan sebuah restoran à la carte. Pintu langsung dibuka. Anda memesan satu hidangan. Koki hanya menyiapkan hidangan tersebut. Jika Anda ingin pencuci mulut nanti, koki hanya menyiapkan pencuci mulutnya saja. Anda tidak perlu menunggu seluruh menu dimasak. Inilah cara kerja Vite.
Vite menggunakan dua strategi berbeda untuk dua kebutuhan yang berbeda:
Pengembangan (vite dev)
- Strategi: Menyajikan modul ESM native tanpa bundling.
- Kecepatan: Instan. Tidak bergantung pada ukuran proyek.
- Mengapa: Permintaan jaringan lokal sangat cepat.
Produksi (vite build)
- Strategi: Melakukan bundling pada semuanya menggunakan Rolldown.
- Kecepatan: Bergantung pada ukuran proyek.
- Mengapa: Ratusan file terpisah akan menciptakan terlalu banyak permintaan HTTP bagi pengguna asli. Bundling membuat situs akhir menjadi lebih cepat bagi mereka.
Vite memberi Anda kecepatan saat Anda menulis kode dan performa saat Anda meluncurkannya.
Sumber: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62