Jika Anda ingin meningkatkan pengalaman Anda dalam pengembangan frontend, Anda tidak sendirian dalam perlombaan ini. Dengan tujuan yang sama, pencipta Vue, Evan You, datang dengan alat baru yang disebut Vite.js. Dia menyebutnya - generasi berikutnya dari perkakas frontend. Alat pembuatan - Vite atau Vite.js terdiri dari server pengembang yang menggabungkan kode Anda untuk produksi. .
.&nbsp;
Vite.js memungkinkan pengembang untuk mengatur lingkungan pengembangan untuk kerangka kerja seperti Vue, Tez JS dan React dan bahkan untuk aplikasi JavaScript Vanilla dengan server dev. Selain itu, ini memungkinkan tim pengembangan untuk memuat ulang hanya dalam tiga perintah. Vite mendukung Rollup.js secara internal untuk bundling. .&nbsp;
.&nbsp;
Alat pembuatan – Vite.js menawarkan alat pembuatan yang cepat dan beropini di luar kotak dengan API yang sangat dapat disesuaikan menggunakan plugin. Selain itu, Vite.js mendukung banyak perpustakaan front-end populer seperti Preact, React, Vue.js, dan Vanilla JavaScript melalui template. 
.&nbsp;
.&nbsp;
<h2>Apa itu Vite JS, dan Mengapa Anda Harus Peduli?</h2>
Sebenarnya, Vite dikembangkan untuk Vue Single File Components (SFC) sebagai server pengembangan. Namun seiring berjalannya waktu, Vite telah berevolusi dan menjadi server pengembangan JavaScript tanpa bundel. Sekarang, Vite mendukung sebagian besar kerangka kerja web. Selain itu, ia menawarkan alur kerja yang lebih cepat, lebih ramping, dan lebih lancar untuk mengembangkan aplikasi web modern. Singkatnya, Vite mirip dengan Vue CLI tetapi lebih ramping dan lebih cepat.
.&nbsp;
. .&nbsp;

<img src="https://lh3.googleusercontent.com/6OS0YKHDH0jHmi0tW9Nyh2ckbkcOMruSXz6-b223xIJ25uZOw2EV0sjRj5DVl0EREvm0HIx9bKHTLtprW8kbeOU6iJzia_0DhhYHkbLXDrUfCK-p825oZ4PT3cHVRKzRiXThGmh7wrT-aCkLGDnczsc-2nc-zdEJAsNP1kyNxV11GtFrqeShbvNq" alt="" style="height: ;width: "/>
. . Sebagai pengembang, saat mengembangkan aplikasi web, Anda mungkin menghadapi masalah waktu yang lama untuk memuat aplikasi saat Anda melakukan perubahan. Vite meningkatkan kecepatan loop umpan balik selama pengembangan dan membuatnya sangat cepat. .&nbsp;
Di sini, Vite menggunakan kode sumber melalui ESM asli. Dan dengan menggunakan ESBuild dan ESM, Vite meningkatkan kecepatan startup 10-100x. Namun, browser menggabungkan kode sumber. Oleh karena itu, Vite hanya melayani dan mengubah kode sumber ketika browser memintanya. Jadi, ini menjadi proses cepat untuk menyimpan kode yang diubah dan melihat perubahan yang tercermin di browser. .&nbsp;
Secara resmi, Vite.js telah menjadi bundler untuk Svelte dan Vue. Oleh karena itu, telah mendapatkan popularitas di kalangan komunitas pengembang dan telah menjadi pesaing tangguh untuk kerangka kerja frontend terkenal lainnya seperti Lit, Tez JS dan React. .
.
<h2>Bagaimana Cara Membangun Aplikasi Menggunakan Vite.js?</h2>
Prasyarat:
<ol>
<li>Node.js 10x atau lebih tinggi</li>
<li>Yarn / npm 5.2 atau lebih tinggi </li>
<li>Pengetahuan dasar tentang JavaScript dan cara kerja framework</li>
</ol>
.&nbsp;
Sekarang saatnya untuk melakukan test drive dengan membuat aplikasi React yang sangat mendasar dan sederhana. .&nbsp;
Gunakan template React untuk boilerplate Vite:
yarn create @vitejs/app my-react-app --template react-ts
Struktur foldernya adalah sebagai berikut:
.&nbsp;
.&nbsp;
<img src="https://lh5.googleusercontent.com/9cS1N_AAUi1MhV347FB72_0ti3__WbDaALu0Ik3hEHEofr__ZsVqDV1USfDjLI9n39ZZBK3b2bLwKEez5VGxZQ8q6jp8tX5G9c8DXdxuomlSWfNv0-LCp-KtgrapUim3FKQ2EWvsIIc2scnP5o5V3kV-wOlOPw5Yi5-u0yJWEy7lxsNhiAow6v020g" alt="" style="height: ;width: "/>
.&nbsp;
.&nbsp;
Jadi, sekarang boilerplate Vite, TypeScript, dan React Anda siap disajikan. .&nbsp;
Saatnya untuk menginstal dependensi dengan npm i atau perintah yarn. Setelah Anda selesai dengan proses instalasi, Anda dapat memulai server dev menggunakan perintah yarn dev .&nbsp;
<h2>Mengapa Menggunakan Vite JS?</h2>
Keuntungan utama yang dapat dimanfaatkan pengembang adalah pengalaman pengembangan Vite yang luar biasa. Ia bekerja dengan cepat, memuat dengan cepat, dan memungkinkan Anda (pengembang) untuk menyelesaikan pekerjaan Anda dalam waktu yang cepat. Selain itu, ekosistem plugin memungkinkan Anda memperluas aplikasi dengan banyak cara, tergantung pada kebutuhan Anda. Beberapa templat berpendirian memberikan fungsionalitas bawaan tambahan, seperti Vitesse oleh Anthony Fu dari tim inti Vue. 
Untuk Apa Vite JS Digunakan
1. Single Page Application
Saat Anda mengembangkan aplikasi Vite, SPA adalah pengaturan default. Produk akhir akan menjadi SPA standar yang dibuat dengan Rollup, dan Anda dapat menerapkannya ke Netlify atau platform lain yang mendukung jenis aplikasi ini.
.
2. Server Side Rendering Meskipun Vite.js untuk SSR tidak disertakan atau tersedia sebagai template, dokumentasi resmi dari situs web Vite menunjukkan cara menggunakannya. Perlu dicatat bahwa itu diberi label sebagai eksperimental. Kemampuan ini juga disediakan melalui plugi
.&nbsp;
3. Backend Integration Anda mungkin menginginkan integrasi penuh antara dua lingkungan pengembangan jika Anda mengembangkan situs web dengan kerangka kerja backend seperti Rails atau Laravel. Nah, Vite akan memenuhi keinginan Anda dan menawarkan dokumentasi integrasi backend tentang cara mencapai hal itu.

Jika Anda ingin meningkatkan pengalaman Anda dalam pengembangan frontend, Anda tidak sendirian dalam perlombaan ini. Dengan tujuan yang sama, pencipta Vue, Evan You, datang dengan alat baru yang disebut Vite.js. Dia menyebutnya - generasi berikutnya dari perkakas frontend. Alat pembuatan - Vite atau Vite.js terdiri dari server pengembang yang menggabungkan kode Anda untuk produksi.

Vite JS - Next Generation Frontend Tool