Mengapa kami beralih dari Webpack ke Vite

gambar




Misi Replit adalah membuat pemrograman lebih mudah diakses. Kami memberikan komputasi awan gratis kepada orang-orang sehingga mereka dapat membuat aplikasi di perangkat apa pun. Salah satu cara paling populer untuk membangun aplikasi di Internet saat ini adalah React. Namun, secara historis alat React lambat pada Replit. Meskipun ekosistem JavaScript telah menciptakan alat yang hebat untuk pengembang profesional, banyak yang paling populer, seperti Create React App dan Webpack, menjadi lebih kompleks dan tidak efisien.



Untungnya, kami telah melihat komunitas JavaScript memahami tantangan ini dan melanjutkan untuk membangun alat yang lebih cepat dan lebih efisien, yang berarti kami akhirnya dapat memberikan pengalaman yang diharapkan pengguna dari kami.



Pengalaman baru ini dibangun di atas Vite , alat pembuatan JavaScript yang memungkinkan pengembangan yang cepat dan hemat biaya. Vite hadir dengan sejumlah fitur termasuk HMR atau Hot Module Replacement, perintah build yang mengintegrasikan alat Anda dengan Rollup , dan dukungan TypeScript dan JSX bawaan.



Vite mempercepat pengembangan dengan React. Ini mempercepat banyak. Dengan HMR, perubahan yang Anda buat ditampilkan dalam milidetik, secara dramatis mempercepat pembuatan prototipe UI. Dengan pemikiran tersebut, kami memutuskan untuk menulis ulang template React kami menggunakan Vite dan terkejut melihat betapa cepatnya proses tersebut. Ini adalah tampilannya dibandingkan dengan template CRA lama kami:







Selama beberapa minggu terakhir, template React baru kami telah membantu desainer kami membuat prototipe komponen UI yang kompleks dan telah memungkinkan banyak kandidat teknisi kami untuk membuat seluruh aplikasi web hanya dalam beberapa jam di situs (virtual) kami. Saat Anda melihat ini beraksi, mudah untuk melihat mengapa:



gambar



Bagaimana itu bekerja



Vite bekerja dengan memperlakukan kode sumber dan dependensi Anda secara berbeda. Tidak seperti kode sumber Anda, dependensi tidak sering berubah selama pengembangan. Vite memanfaatkan fakta ini dengan memaketkan terlebih dahulu dependensi Anda dengan esbuild . Esbuild adalah pembuat JS yang ditulis dalam Go yang menggabungkan dependensi 10 hingga 100 kali lebih cepat daripada alternatif berbasis JavaScript seperti Webpack dan Parcel.



Ini kemudian menyajikan kode sumber Anda melalui modul ES atau ESM asli, yang memungkinkan browser menangani bundel sebenarnya.



Terakhir, Vite mendukung HMR, yang memastikan bahwa saat Anda mengedit file, hanya modul yang relevan yang diganti, bukan membangun kembali seluruh paket, yang menyebabkan halaman dimuat ulang dan menyetel ulang status. Tidak seperti pembangun lain, Vite melakukan HMR pada modul ES-nya sendiri, yang berarti Vite hanya perlu membatalkan modul yang terpengaruh saat mengedit file. Ini memastikan bahwa waktu pembaruan secara konsisten cepat dan tidak diskalakan secara linier saat aplikasi Anda berkembang.



Ayo mulai



Untuk memulai, cukup buat template React kami atau pilih React.js dari dropdown saat membuat replay baru .



Vite juga merupakan framework agnostik, jadi jika Anda tidak menyukai React, Anda juga dapat menggunakan template Vue dan Vanilla JS kami .



Kami berharap ini akan membantu Anda mewujudkan ide-ide Anda lebih cepat, dan kami berharap untuk melihat apa yang Anda buat!



All Articles