Vite 4 Telah Dirilis: Fitur Baru dan Cara Upgrade

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

¶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 vite@latest acme

Setelah itu akan muncul pilihan tentang versi terbarunya seperti:

Need to install the following packages:
  [email protected]
Ok to proceed? (y)

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

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

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.