Vite: Bir Module Bundler’dan Daha Fazlası 🚀
Bu yazıda frontend dünyasının yeni yıldızlarından performans odaklı ve developer experience’ı arttırmayı amaçlayan Vite module bundler’ına yakından bakıyor olacağız.
Asıl konuya giriş yapmadan önce module bundler nedir bir göz atalım 👇🏻.
Module Bundler Nedir?
Temelde projenin ihtiyaç duyduğu dosyaların, kütüphanelerin birleştirilip organize edilerek tarayıcıların çalıştırabileceği tek veya birden fazla paket haline dönüştüren araçlardır.
Webpack, rollup, snowpack gibi module bundler’lar sayesinde:
- Development ortamının oluşturulması
- Production build’lerinin alınması
- Tree-shaking ve code splitting
- Image optimizasyonu
- ES6 kodunun ES5 versiyonuna dönüştürülmesi
- Path aliases (İç içe klasörler için takma isim verilmesi)
- Hot Module Replacement (HMR)
gibi bir çok özelliği projelerimizde kullanabiliyor, pluginler sayesinde de yeni işlevler katabiliyoruz.
Ancak gün geçtikçe büyüyen ve isteklerin arttığı projeler, kullanılan kütüphane sayısındaki artış ve codebase’in büyümesi gibi durumlar kullandığımız module bundler’ların performansını olumsuz yönde etkilemeye başladı. Bununla birlikte projelerin yavaş ayağa kalkması, production build ve live reload sürelerinin artması gibi durumlarla sıkça karşılaşmaya başladık 🥲.
Tam da bu noktada oldukça performanslı ve mevcuttaki bundler’ların iyi yaptığı işleri bir araya getiren Vite ortaya çıktı.
Vite Github — https://github.com/vitejs/vite
Vite Nedir?
Vite performans odaklı, ön tanımlı configlere sahip, TypeScript destekli, geliştirme sırasında native ES Module imports’u kullanan ve çok hızlı bir development server’a sahip yeni nesil module bundler’dır.
Native ES Module Imports: Javascript modules (import — export) özelliğinin tarayıcılarda native olarak destek verilmesidir.
Diğer bundler’ların aksine geliştirme sırasında tarayıcıda çalışacak kodu bundle haline getirmeyip güncel tarayıcıların desteklediği native ES Module imports ile karşılar bu sayede bundle maliyeti ortadan kalkacağı için çok hızlı bir development ortamı sağlar. Ayrıca ön tanımlı bir çok config ve template (react, vue, svelte vb.) sayesinde kısa sürede production-ready uygulamalar oluşturabilirsiniz.
Vite bu hızını pre-bundle için kullandığı esbuild, code transpile’ı için kullandığı SWC ve native ES Module imports’tan alıyor. Production build’leri için de rollup tool’unu kullanıyor.
Şu ana kadar bahsedilenlerden de anlayacağınız üzere Vite: geçmiş deneyimlerdeki problemleri çözen, kurulum süreçlerini minimize eden, diğer tool’ları da beraberinde kullanan, çok yönlü bir frontend altyapısı vadediyor.
Performans Sorunlarını Nasıl Çözüyor? 🤔
Vite’in bu kadar hızlı çalışmasını sağlayan mekanizmayı aşağıdaki üç madde ile açıklayabiliriz:
✅ Geliştirme sırasında projenin bundle edilmeyip native ES Module imports ile browser üzerinde serve edilir.
✅ Go tabanlı esbuild ile projeyi ve dependency’leri analiz edip geliştirme sırasında değişmesi gerekmeyen kod parçalarını pre-bundle işlemine sokar bu sayede değişiklik yapıldığında tüm projenin tekrar bundle edilmesi gerekmez.
✅ Sadece production adımında bundle işlemi gerçekleştiği için development adımındaki bundle oluşturma maliyeti ortadan kalkar.
Vite Nasıl Kullanılır?
Bir vite projesi oluşturmak için genellikle aşağıdaki tablodaki offical veya community tarafından oluşturulmuş templateleri kullanabilirsiniz.
┌────────────┬────────────┐
│ Javascript │ TypeScript │
├────────────┼────────────┤
│ vanilla │ vanilla-ts │
│ vue │ vue-ts │
│ react │ react-ts │
│ lit │ lit-ts │
│ svelte │ svelte-ts │
│ preact │ preact-ts │
└────────────┴────────────┘Şimdi kolları sıvayalım ve vite ile bir react projesi oluşturalım.
1️⃣ Terminali açın ve projenizi oluşturacağınız dizine gidin. Tercih ettiğiniz package manager’a göre aşağıdaki komutlardan birini girin.
$ npm create vite@latest
$ yarn create vite
$ pnpm create vite2️⃣ Komutu girdikten sonra yine tercihlerinize göre adım adım yönlendirmeleri takip edin.
3️⃣ Proje dizinine gidip npm install && npm run dev komutları ile projenizi ayağa kaldırın.
4️⃣ Production build almak için terminalinizde npm run build komutunu girin.
Bu komut ile dist klasörüne build dosyalarımız oluşuyor. Görüldüğü üzere neredeyse sıfır konfigurasyonla bir react projesi ve buna ait development ve production ortamını oluşturmuş olduk 🤩.
Vite Projesinin Konfigüre Edilmesi
Webpack kullanırken projenize ait konfigürasyonları teker teker eklemeniz gerekir. Fakat Vite bir frontend uygulamasının ihtiyaç duyduğu altyapıyı ön tanımlı olarak sunar. Bu altyapı size yetmediği veya farklı özellikler eklemek istediğiniz durumlarda ise gerekli ayarlarımızı vite.config.js dosyasında tutuyoruz. Örneğin yukarıda oluşturduğumuz react projesi için path alias’ları config dosyasını aşağıdaki gibi düzenleyerek ekleyebiliriz.
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@pages': path.resolve(__dirname, './src/pages'),
'@utils': path.resolve(__dirname, './src/utils'),
},
},
// ...
})Vite Plugin’leri Nasıl Kullanılır?
Vite, projelerimizin farklı ihtiyaçlarına yönelik plugin sistemi sunar. Bu plugin’ler sayesinde vite içindeki default ayarları değiştirebilir veya vite’in ön tanımlı olarak sunmadığı özellikleri projelerimize dahil edebiliriz.
Vite Plugin Listesi — https://github.com/vitejs/awesome-vite#plugins
Örneğin projemizin destek sağlayacağı tarayıcıları belirlemek için @vitejs/plugin-legacy plugin’inini config dosyasına ekleyip ilgili ayarları yapalım.
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
}Bu sayede projemizin production bundle’ından IE 11 desteğini kaldırmış olduk 🎉.
Performans Karşılaştırmaları 🏎
Yazının bu kısmına kadar vite’in çok performanslı bir tool olduğundan bahsettik ayrıca dökümantasyonunda da en büyük vaatlerinden biri frontend uygulamaları için çok daha hızlı bir environment sunmak olduğu geçiyor. Buna istinaden bazı grafiklere ve istatistiklere bakalım.
Grafikten de anlaşıldığı gibi vite’in olumlu yönde bir ivmesi var. Şu an npm’deki haftalık indirme sayılarına baktığımızda vite’in 4,846,214 webpack’in ise 27,562,318 indirmesi bulunuyor. Nispeten yeni popülerleşen bir paket için gayet iyi bir rakam olduğunu düşünüyorum.
Bir başka yazıda paylaşılan veriye göre ise dosya sayısı arttıkça vite’ın performansının düştüğünü görebiliyoruz. Fakat 5000 tane dosyanın bulunduğu bir projenin muhtemelen çok daha kritik sorunları vardır 🙃.
Bu istatistiklerde benim de katkım olsun diye 3 adet module bundler (vite, create-react-app/webpack, parcel) ile bir react projesi oluşturup production build sürelerini ölçümledim.
┌───────┬────────┬─────────────┐
│ Vite │ Parcel │ CRA/Webpack │
├───────┼────────┼─────────────┤
│ 841ms │ 2.832s │ 6.489s │
└───────┴────────┴─────────────┘Vite gayet hızlı gözüküyor fakat bu ölçüm boş react projeleri için yapıldı. Proje büyüdükçe, plugin sayısı arttıkça, optimization vs gibi özellikler eklenirse sonuçlarda değişiklikler olabilir.
Avantajları ve Dezavantajları Neler?
Vite kullanıp kullanmamakla ilgili aklınızda bir fikir oluşturmak adına bazı özelliklerine maddeler halinde bakacak olursak:
- ✅ Diğer module bundler’lara göre 10 ila 100 kat daha performanslı
- ✅ Detaylı ve zaman alan konfigürasyonlardan uzak
- ✅ Dökümantasyonu oldukça detaylı ve community’si hızlıca artmakta
- ✅ Hot Module Replacement (HMR) özelliği çok daha hızlı
- ✅ TypeScript, CSS Pre-processors (sass, less vb.), PostCSS, CSS modules, ENV gibi onlarca özelliği ön tanımlı olarak barındırır
- ✅ Yerleşik bir development server’a sahip
- ❌ Yeni bir tool olduğu için hangi ölçekte projelerin ihtiyaçlarını karşılayacağına dair yeterli veri yok
- ❌ Development sırasında esbuild, production sırasında rollup kullandığından dolayı bu farklılık nedeniyle oluşabilecek bug’ların çözümü ve fark edilmesi zor olabilir
Webpack Kullanmayı Bırakalım Mı? 🙄
Yazılım dünyasında ne zaman bir alternatif çıksa aslını öldürmekle, çöpe atmakla, kullanmayı bırakmakla ilgili makaleler, videolar veya tweetlerle karşılaşabiliyoruz. Ama ne php öldü ne jquery ortadan kalktı ne de wordpress bitti… Aynı konular webpack için de konuşulmaya başladı. Şu an için vite’nin webpack’in yerini alması gibi bir durum çok mümkün görünmüyor. Zaten bakış açımız da böyle bir kıyaslamaya girmektense yapmak istediğimiz projenin ihtiyaçlarını en kolay, en hızlı ve en stabil şekilde karşılayabilecek aracı seçmeye yönelik olmalıdır ✍🏻.
Sonuç olarak;
Hızlıca popülerleşen ve hala popüler kalmaya devam eden Vite bizlere uygulamalarımız için gerekli frontend altyapısını hızlı ve kolay bir şekilde sunuyor. Özellikle startup projeleri veya konfigürasyon ve altyapı kurulumunun çok önem arz etmediği projeler için oldukça uygun bir araç. Büyük ölçekli projeler için de daha fazla kullanıcı deneyimine ve testine ihtiyaç olduğunu düşünüyorum.
Geri Bildirim 💬
Yazı hakkında önerileriniz veya düzeltmeleriniz için iletişime geçebilirsiniz.
