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.

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.

19:46:11 PM [vite] vite.config.ts changed, restarting server...
29:46:11 PM [vite] server restarted.
3
4  Shortcuts
5  press r to restart the server
6  press o to open in browser
7  press q to quit
8
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.

1npm create [email protected] acme
2
bashCopy

Setelah itu akan muncul pilihan tentang versi terbarunya seperti:

1Need to install the following packages:
2  [email protected]
3Ok to proceed? (y)
4
bashCopy

Langsung saja enter, maka dia akan memproses dengan versi 4. Kemudian setelah itu dia akan bertanya kita ingin memakai framework apa.

1? Select a framework: › - Use arrow-keys. Return to submit.
2    Vanilla
3    Vue
4❯   React
5    Preact
6    Lit
7    Svelte
8    Others
9
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.

1✔ Select a framework: › React
2? Select a variant: › - Use arrow-keys. Return to submit.
3❯   JavaScript
4    TypeScript
5    JavaScript + SWC
6    TypeScript + SWC
7
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.