Vite, Build Tool Lebih Cepat dari Create React App

Introduction

Vite meningkatkan developer experience secara signifikan dan memungkinkan untuk install time, build time awal, dan hot reload yang sangat cepat

Dalam kurun waktu yang cukup lama, kita selalu menggunakan Webpack untuk bundler di React yang terdapat dalam Create React App. Bahkan, sampai sekarang CRA masih menggunakan Webpack sebagai pilihan bundlernya. Walaupun tidak dapat dipungkiri Webpack sangat baik sebagai bundler, dan banyak javascript application yang menggunakannya, kadang butuh waktu yang cukup lama untuk boot up dev server pertama kali. Kadang bisa 1 sampai 2 menit untuk project yang sudah cukup besar, hot reload pada CRA juga terasa lemot saat project sudah cukup besar.

What is Vite?

Vite (Kata dari bahasa perancis dengan arti "cepat", penyebutannya /vit/) adalah sebuah build tool yang melakukan pre-bundling debendencies menggunakan esbuild. Esbuild ditulis dalam bahasa Go dan dapat melakukan pre-bundling dependencies 10-100x lebih cepat daripada kebanyakan JavaScript-based bundler.

Vite memiliki 2 fitur besar:

• Dev server yang menyediakan rich feature enhancements di atas native ES modules, contohnya Hot Module Replacement (HMR) yang sangat cepat.
• Build command yang membundle code kita dengan Rollup yang sudah di pre-configure untuk memberikan output static assets sangat teroptimasi untuk production.

Aplikasi Vite bekerja sama persis seperti normalnya aplikasi React, kita bisa menggunakan semua fitur yang ada sama dengan Create React App, dengan developer experience yang lebih cepat.

How fast is Vite?

Saya mencoba untuk membandingkan installation time, dan build time sampai server berjalan, dan ini hasilnya:

Installation Time

Ini adalah command yang saya gunakan untuk menginstall Vite dan CRA. Saya menjalankan yarn command pada Vite karena Vite hanya melakukan scaffolding saja pada saat instalasi dan kita harus menginstall dependenciesnya sendiri

Instalasi menggunakan CRA memakan waktu yang sangat signifikan daripada Vite. Vite selesai hanya dalam kurun waktu 26 detik, dan Create React App memakan waktu 1 menit 12 detik. Vite sangat cepat dalam waktu instalasi.

Build Time

Instalasi hanya dijalankan sekali pada saat awal kita membuat project, tetapi build time akan berjalan setiap kali kita mau develop project yang ktia miliki! Ini jauh lebih penting dan bisa menujadi turning point untuk pindah dari CRA ke Vite.

Hasilnya adalah, Vite hanya membutuhkan waktu sekitar 300ms, bahkan iTerm saya tidak menghitung waktu karena sangking cepatnya. Sedangkan Create React App memakan waktu sebanyak 22 detik sampai server berjalan.

Dan ini adalah project kosong, building time akan meningkat seiring dengan project kita yang semakin besar.

Try it out!

Saya menyarankan anda untuk mencoba sendiri dan merasakan kecepatannya, untuk mempersingkat, saya memiliki sebuah vite-react-tailwind starter template, dapat dicek di github saya. Kemudian buka terminal dan jalankan code berikut:

npx degit https://github.com/theodorusclarence/vite-react-tailwind-starter project-name

kemudian, install dependencies menggunakan

yarn
atau
npm install

To start the server run the code

yarn dev
atau
npm run dev

Bagaimana?

Hot reload dari Vite juga sangat cepat, coba ubah" codingan pada Landing Page di /pages/Home.jsx

Summary

Use the starter as a bonus!

Anda boleh menggunakan starter tersebut untuk project anda! Saya membuat starter tersebut untuk menghindari melakukan setup react-router, react helmet, absolute import, dan tailwindcss setiap kali saya membuat sebuah project. Coba gunakan starter itu untuk mempermudah dan kindly give it a star!

Dengan adanya Vite ditambah Next.js, sepertinya saya tidak akan menggunakan CRA lagi. Saya sudah pasti akan memilih Vite daripada CRA ketika harus membuat sebuah aplikasi yang ada authenticationnya, dan menggunakan Next.js ketika membuat static site.