Vite 4 Telah Rilis

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.

2 min read

Published on 09 Dec, 2022

Written by Irsyad A. Panjaitan

Fill in ViteReleased

ArticlesVite 4 Telah Rilis

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.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
5

Share on