Apakah Anda masih menggunakan create-react-app untuk mengatur proyek React Anda? Beralih ke Vite untuk kinerja yang lebih baik dan kecepatan pengembangan yang lebih cepat.
Saat memulai proyek React baru, banyak pengembang beralih ke buat-reaksi-aplikasi sebagai alat perintah masuk untuk penyiapan dan konfigurasi proyek. Namun, Vite adalah alternatif yang lebih baik. Ini menawarkan waktu pengembangan yang lebih cepat dan kinerja yang lebih baik.
Apa itu Vite?
Vite adalah alat build dan server pengembangan yang dirancang untuk meningkatkan proses pengembangan aplikasi web modern. Ini dilakukan dengan membagi modul aplikasi Anda menjadi dependensi dan kode sumber. Ketergantungan adalah modul yang tidak sering berubah, sedangkan kode sumber biasanya sering diedit selama pengembangan.
Vite menggunakan esbuild, bundler berbasis Go yang secara signifikan lebih cepat daripada bundler berbasis JavaScript tradisional untuk mempercepat proses pembuatan kode sumber. Itu juga mem-bundel dependensi aplikasi Anda dan menyajikan kode sumber melalui ESM asli, memungkinkan browser mengoptimalkan pemuatan modul untuk aplikasi yang lebih efisien dan lebih cepat pertunjukan. Saat tiba waktunya untuk menerapkan aplikasi Anda ke produksi, Vite memiliki perintah build bawaan yang secara otomatis mengoptimalkan aplikasi Anda untuk penerapan, memastikan aplikasi Anda berjalan lancar.
Membuat Proyek Vite
Sebelum membuat proyek Vite, perhatikan bahwa Vite membutuhkan Node.js versi 14.18+ atau 16+. Anda dapat merujuk ke artikel ini untuk menginstal Node di mesin Windows atau Ubuntu Anda.
- Bagaimana caranya instal Node.js di Windows.
- Mempelajari cara menginstal Npm dan Node.js di Ubuntu
Buat proyek Vite dengan menjalankan perintah ini di terminal.
npm buat vite@terbaru
Setelah perintah mulai dijalankan, Anda akan dimintai nama proyek. Ketikkan nama proyek Anda dan klik enter.
Selanjutnya, Vite akan meminta Anda untuk memilih kerangka kerja. Pilih Bereaksi.
Vite juga akan meminta Anda untuk memilih varian. Pilih JavaScript.
Saat Vite menyelesaikan scaffolding proyek, navigasikan direktori yang dibuatnya, dan instal dependensi melalui npm.
instal npm
Untuk menjalankan proyek, gunakan perintah ini:
npm menjalankan dev
Ini harus menjadi halaman rumah.
Anda dapat mulai mengedit proyek Anda dan perubahan Anda akan terlihat di browser.
Gunakan Vite untuk Kecepatan Pengembangan Cepat
CRA (create-react-app) biasanya merupakan alat default untuk mengatur struktur proyek dan konfigurasi untuk aplikasi React. Ini nyaman karena semuanya sudah diatur untuk Anda, tetapi mungkin lambat untuk membangun dan memuat ulang selama pengembangan.
Vite, di sisi lain, menggunakan modul ES asli di browser untuk menyediakan waktu pembuatan yang lebih cepat. Jika Anda tidak ingin menggunakan Vite, Anda dapat memilih kerangka kerja meta React seperti Next.js karena Vite juga dirancang untuk berkinerja tinggi.
