Share
5 bulan yang lalu, vite baru saja rilis versi 3, dan sekarang tepat saat saya menulis artikel ini, vite baru saja merilis versi terbarunya yaitu versi 4.
Vite 4 install size is 23% smaller compared to vite 3.2.5 (14.1 MB vs 18.3 MB).
Plugin terbaru untuk React
SWC sekarang menjadi pengganti Babel yang matang, terutama dalam konteks proyek React. Implementasi React Fast Refresh SWC jauh lebih cepat daripada Babel, dan untuk beberapa proyek, ini sekarang menjadi alternatif yang lebih baik. Baca lebih lanjut tentang package ini disini.
Penyesuaian Browser
Browser sekarang menargetkan safari 14 secara default untuk kompatibilitas ES2020 yang lebih luas. Ini berarti browser sekarang dapat menggunakan BigInt dan nullish coalescing operator tidak lagi ditranspilasikan.
CLI Shortcuts
Dalam keadaan aktif terminal development nya, sekarang kita bisa tekan h
pada keyboard sewaktu development.
9:46:11 PM [vite] vite.config.ts changed, restarting server... 9:46:11 PM [vite] server restarted. Shortcuts press r to restart the server press o to open in browser press q to quit
bashCopy
Mulai dengan Vite 4
Untuk memulainya, mudah saja. Jika Anda sudah pernah menggunakan vite di versi-versi sebelumnya, maka harusnya caranya sama sekali tidak berubah.
npm create [email protected] acme
bashCopy
Setelah itu akan muncul pilihan tentang versi terbarunya seperti:
Need to install the following packages: [email protected] Ok to proceed? (y)
bashCopy
Langsung saja enter, maka dia akan memproses dengan versi 4. Kemudian setelah itu dia akan bertanya kita ingin memakai framework apa.
? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Others
bashCopy
Tekan up/down pada keyboard untuk berpindah, disini saya akan menggunakan react. Kemudian, dia akan bertanya lagi, kita ingin pakai typescript atau tidak, atau bahkan menggunakan swc.
✔ Select a framework: › React ? Select a variant: › - Use arrow-keys. Return to submit. ❯ JavaScript TypeScript JavaScript + SWC TypeScript + SWC
bashCopy
Disini saya akan memilih TypeScript + SWC
sekalian untuk testing, karena pilihan ini juga baru saja muncul di versi 4 ini. Keterangan lebih lanjut bisa dilihat disini.
Ayo test vite 4 ini sekarang, dan nikmati kecepatannya saat development. Semoga artikel ini bermanfaat, dan sampai jumpa di artikel selanjutnya.