Vite JS’e başlarken
Yeni nesil frontend aracı Vite ile adım adım
Vite, Evan You (Vue.js’i geliştiren ekip) tarafından oluşturulan ve frontend geliştirme deneyimini önemli derecede iyileştiren bir derleme aracı. Öncelikle Vue 3 ile çalışmak üzere tasarlanmış olsa da React dahil olmak üzere diğer framework’lerle de kullanılıyor.
Aynı zamanda vite, “hızlı” anlamına gelen Fransızca bir kelimeymiş :)
Neden yeni bir araç?
ES modülleri icat edilmeden önce; bundling işlemi, kaynak modülleri işleyebilen ve dosyalara birleştirebilen bir mekanizma sağlayarak geliştiricilerin hayatlarını kolaylaştırıyordu. Bu dosyalar tarayıcıda kolayca çalışabiliyordu.
Paketleyiciler (Webpack, Parcel, Snowpack vb.) geliştirme verimliliğini büyük ölçüde artırdı. Ancak daha iddialı uygulamalara geçmemiz, kod hacmi ve modül sayısı ile birlikte projenin karmaşıklığını da artırdı.
Sorun şu ki, bu devasa kod hacmi performansı etkilemeye başlamıştı.
Aşağıdaki görselde, Vite dev sunucusu gibi yerel bir ES modülü tabanlı dev sunucusunu kodu çalıştırmaya başlattığımızda, sunucunun anında başladığını görebiliriz.
Sonuç olarak, büyük ölçekli projelerde zamanla ortaya çıkan performans sorunlarına çözüm üretmek amacıyla bu araca ihtiyaç duyulmuş.
Nasıl çalışır?
Vite, bağımlılıkları ve kaynak kodunu farklı şekilde işler. Kodu isteğe bağlı olarak derleyerek bu sorunları çözer, yalnızca olası ekranda içe aktarılan kodu derler. Hot Module Replacement performansı toplam derlenen modül sayısından ayrılır ve uygulamanız ne kadar büyük olursa olsun HMR’yi sürekli olarak hızlı hale getirir.
Performans
Vite, esbuild kullanarak bağımlılıkları önceden paketler, bağımlılıkları JavaScript tabanlı paketleyicilerden 10–100 kat daha hızlı paketler.
Bir şeyler değiştiğinde tüm paketi yeniden oluşturması gerekmez.
Vite kullanarak React App oluşturma
Terminalinizi açın ve seçtiğiniz dizine gidin. Buradan Vite init komutunu çalıştırın.
npm ya da yarn paket yöneticilerinden herhangi birini tercih edebilirsiniz.
npm init vite
or
yarn create viteAşağıda gösterildiği gibi bir proje ve paket adı eklememiz gerekiyor.
Artık projemiz oluşturuldu. Proje dizinimize gidip, kurulumumuzu yapalım.
cd vite-project - npm install
or
cd vite-project - yarnÇalıştıralım.
yarn dev
or
npm run dev
Local linkine tıkladığınızda React app’iniz aşağıda şekilde çalışıyor olmalı.
Nasıl hızlı çalıştı, görüyorsunuz :)
Proje klasörünü açtığınızda, aralarında main.jsx dosyasının da bulunduğu farklı dosyalar göreceksiniz.
Tarayıcının çıktısından sorumlu kod App.jsx’te bulunur ve main.jsx dosyasından işlenir.
Aşağıdaki gibi App.jsx dosyasına bir şeyler ekleyin:
Şimdi eklediğimiz haliyle basit bir React+Vite uygulamamızı oluşturduk:
Vite’da; %PUBLIC_URL% seçeneğinin eksik olduğunu fark edeceksiniz. Bu yer tutucu, React’in ortak klasöründeki tüm statik dosyaları eşler.
index.html dosyasındaki URL’lerin otomatik olarak yeniden temellendirilmesi nedeniyle Vite’da %PUBLIC_URL% gerekli değildir.
Bu makalede, Vite aracını kullanarak bir React + Vite uygulamasının nasıl oluşturulabileceğini anlatmaya çalıştım. Ayrıca Vite aracının özelliklerinin ve faydalarının üzerinden geçtik.
Biz Yolda.com Front-end ekibi olarak bazı projelerimizde geçişleri yaptık ve hızın bizi nasıl şaşırttığını gördük. ⚡
Bundan sonra, eski projelerimizde paketleyicileri Vite ile değiştirmek, yeni projelerimizde ise doğrudan Vite kullanarak başlamak mantıklı gibi görünüyor.
Okuduğunuz için teşekkürler. Her türlü sorunuz için bana ulaşabilirsiniz.
Kaynaklar
