Frontend / Build Tools
Vite Nedir? Yeni Nesil Hızlı Frontend Geliştirme
Vite nedir, ESM ve HMR yaklaşımı geliştirme sürecini nasıl hızlandırır, React projesiyle nasıl başlanır?
Yaklaşım
Vite nedir?
Frontend geliştirme sürecinde hız ve verimlilik, projelerin başarısında önemli bir rol oynar. Vite, modern web geliştirme dünyasında bu ihtiyaçlara yanıt veren yeni nesil bir araç olarak öne çıkıyor. Bu yazıda, Vite’nin ne olduğunu, nasıl çalıştığını ve frontend geliştirme süreçlerinizi nasıl hızlandırabileceğini inceleyeceğiz.
Vite, modern web projeleri için tasarlanmış, hız odaklı bir yapılandırma aracıdır. Vue.js’in yaratıcısı Evan You tarafından geliştirilmiş; React, Vue.js ve Svelte gibi popüler frontend çerçeveleriyle sorunsuz bir şekilde entegre olabilen Vite, geliştirme ortamını hızlandıran ve üretim için optimize edilmiş kod çıktıları sağlayan bir araçtır.
Vite’nin yaratıcısı bu aracı “Next Generation Frontend Tooling” yani yeni nesil frontend araçları olarak tanımlıyor. Bunun nedeni, Vite’nin geleneksel bundler araçlarına tam bir alternatif olmasından çok; çeşitli geliştirme araçları ve paketlerin güçlü yönlerini bir araya getiren bir platform olmasıdır. Asıl fark, geliştirme sürecinin kendisinde ortaya çıkar.
Vite’nin temelinde, modüllerin tarayıcı tarafından doğrudan yorumlanabilmesini sağlayan ESM (ECMAScript Module) desteği yatar. Bu yaklaşım, geleneksel paketleme süreçlerine kıyasla önemli bir hız avantajı sağlar.
Öne çıkanlar
Vite’nin öne çıkan özellikleri
- 01
NPM Dependency Resolving and Pre-Bundling
Vite, NPM bağımlılıklarını önceden paketler ve tarayıcıda doğru yollarla yüklenmesini sağlar. Bu, soğuk başlangıç sürelerini hızlandırır.
- 02
Hot Module Replacement (HMR)
Vite, yerel ESM üzerinden HMR API’si sunar. Sayfa yeniden yüklemesi yapmadan hızlı ve kesin güncellemeler yapılmasını sağlar.
- 03
TypeScript desteği
Vite, .ts dosyalarını kutudan çıktığı gibi destekler. Transpilasyon yapar fakat tip kontrolü yapmaz.
- 04
CSS desteği
.css dosyalarını doğrudan içe aktarır ve HMR desteği ile birlikte sunar. PostCSS ve CSS modülleri de desteklenir.
- 05
JSX desteği
Vite, .jsx ve .tsx dosyalarını destekler. JSX’in esbuild ile dönüştürülmesi sağlanır.
- 06
Statik varlık yönetimi
Statik varlıkların içe aktarılmasını kolaylaştırır. Bu, dinamik içe aktarmalar ve farklı varlık türleri için özel sorguları içerir.
- 07
JSON desteği
JSON dosyaları doğrudan içe aktarılabilir ve adlandırılmış içe aktarmalar desteklenir.
- 08
Glob Import
Vite, import.meta.glob fonksiyonu aracılığıyla birden fazla modülü dosya sisteminden içe aktarmayı destekler.
- 09
WebAssembly ve Web Workers
WebAssembly ve Web Workers, Vite ile kolayca kullanılabilir.
Vite ile Frontend Geliştirme Nasıl Hızlanır?
Vite kullanarak geliştirme sürecinizde önemli derecede hız kazanabilirsiniz. Projenizin başlangıç süresi kısalır ve sayfa yenilemeleri neredeyse anında gerçekleşir. Bu, özellikle büyük ve karmaşık projelerde zaman tasarrufu sağlar. Vite, modern JavaScript özelliklerini ve çerçeveleri sorunsuz bir şekilde kullanmanızı sağlar; böylece daha az yapılandırma ile daha hızlı geliştirebilirsiniz.
Bu özellikler, Vite’nin modern web geliştirme için sunduğu esneklik, hız ve kolay kullanımı vurgular. Daha fazla detay ve kapsamlı bilgi için Vite’nin resmi dokümanlarına göz atabilirsiniz.
Vite Nasıl Çalışır?
Temelde, geleneksel web paketleyicilerin aksine Vite, ES Modülleri kullanır. Bu, geliştirme sırasında tarayıcıların doğrudan anlayabileceği modül formatını kullanarak paketleme sürecini gereksiz kılar.
Geliştirme aşamasında Vite, bir HTTP sunucusu başlatarak geliştiricinin kodunu doğrudan tarayıcıya sunar. Bu sunucu, istek üzerine modülleri sunar ve gerektiğinde bunları hızlı bir şekilde işler. Bu yöntem, geliştirme sürecinde ihtiyaç duyulan modüllerin yalnızca gerekli olduğunda yüklenmesini sağlar; böylece başlangıç süresi önemli ölçüde azalır.
Vite’nin Hot Module Replacement (HMR) özelliği, geliştirme sırasında yapılan değişiklikleri anında tarayıcıya yansıtır. Bu, geliştirme sürecinde sürekli yeniden derleme yapmadan hızlı iterasyonlar yapma imkânı verir.
Build aşaması için Vite, Rollup tabanlı optimizasyonları kullanarak kodu paketler ve optimize eder. Bu, son uygulamanın hızlı yüklenmesini ve yüksek performans göstermesini sağlar.
Bu şekilde Vite hem geliştirme sürecini hızlandırır hem de üretim için optimize edilmiş sonuçlar sunar. Modern web uygulamaları geliştirirken bu iki tarafın aynı araçta buluşması güzel bir avantajdır.
Nasıl Kullanılır? Vite ile Geliştirme Yapmak
Vite kullanarak bir proje geliştirmek istiyorsanız hangi kütüphane veya çerçeveyi tercih edeceğinize, Vite’nin resmi web sitesindeki rehber bölümüne bakarak karar verebilirsiniz. NPM paket yönetim sistemini kullanarak örnek bir Vite projesi oluşturalım.
Uyumluluk notu: Node.js gereksinimi, kullandığınız Vite sürümüne göre değişebilir. Projeyi başlatmadan önce seçtiğiniz sürümün güncel gereksinimlerini kontrol etmeniz iyi olur.
Öncelikle bir terminal açıp aşağıdaki komutu çalıştırıyoruz. Ardından Vite sizden projenizin adını ister; örnek olarak vite-project ismini kullanabilirsiniz.
Sonraki adımda kullanmak istediğiniz framework’ü seçersiniz. React’i seçtikten sonra JavaScript mi yoksa TypeScript mi kullanacağınızı sorar. Bu örnekte JavaScript ile ilerliyorum.
Proje kurulduktan sonra terminalden proje dizinine geçip npm install ile bağımlılıkları yüklüyor ve geliştirme sunucusunu başlatıyoruz. npm run dev komutunu çalıştırdığınızda uygulamanızı genellikle localhost:5173 üzerinde görebilirsiniz.
$ npm create vite@latest$ npm install$ npm run dev