Hızlı ve konforlu ön yüz geliştirme için hazırlanmış yerel bir geliştirme sunucusu hazırlama aracıdır. TypeScript ve JavaScript desteği vardır. Evan You tarafından geliştirilmiştir.

Geliştirme sırasında native ES Module imports kullanan, ön tanımları ile çok hızlı development server kurulumu yapan yeni nesil bir module bundler’dır. 

ESM (EcmaScript Module) standardını temel alır. Modüller geliştirme anlayışını benimser. Özellikle büyük çaplı projelerin modüller bazlı yönetilmesi için esneklik sağlar.

HMR (Hot Module Replacement) özelliğini destekleyerek anlık modül değişikliklerini sağlar. Kodda yaptığınız değişiklik sadece ilgili modülde değil uygulamanın bütününde güncellenir.

Production build işlemini optimize etmek için çeşitli özellikler kullanır. Proje dosyalarını sıkıştırır, küçültür, gerekli olmayan içerikleri temizler.

ViteJS Neden Yüksek Performanslı ve Hızlı?

Çünkü…

• Pre-bundle,
• Ön tanımlı konfigürasyona sahip,
• SWC ve native ES Module imports kullanıyor.

Ayrıca,

• Geliştirme sırasında proje bundle edilmeyip native ES Module imports ile browser üzerinden direk sunulur.
• Go tabanlı esbuild ile projeyi ve dependency’leri analiz eder. Değişmeyen kod blocklarını direk pre-bundle işlemine dahil eder, böylece bütün projeyi bundle etme yükünden kurtarır.
• Sadece production aşamasında bundle işlemini gerçekleştirir. Böylece, development adımındaki bundle oluşturma yükünden kurtulur.

ViteJS Hangi Framework ve Library ile Kullanılır

Modern ve yaygın olarak tercih edilen neredeyse bütün framework’lerle uyumludur.

• VueJS
• React
• Svelte
• Angular

Webpack ve ViteJS Arasındaki Farklar

• TypeScript için Webpack’de ayrı yapılandırma gerekirken ViteJS‘de direk tanımlı gelir. Hemen kullanılmaya başlanabilir.
• Hem Webpack hem de Vite HMR’yi desteklese de, farklı modül hizmet mekanizmaları kullanırlar. ViteJS’de proje değişiklikleri direk browser’a projenin bütününe yansır.
• ViteJS, local and browser caching ile sorunsuz çalışırken, Webpack bu işlevsel için özelleştirilmiş yapılandırma gerektirir.
• ViteJS geliştirme aşamasına odaklanır. Webpack’in production aşamasında da çözümleri mevcuttur.

ViteJS ile Yeni Bir proje Yaratmak

Bulunduğunuz dizinde NPM paket yöneticisi ile Vite projesi başlatmak için aşağıdaki komutu yazmanız yeterlidir.

npm create vite .

Tercih ettiğiniz farklı bir package manager varsa ona göre komutu tekrar düzenlemeniz gerekebilir.

npm create vite@latest
yarn create vite
pnpm create vite

Komutunu yazdıktan sonra kullanacağınız framework ve programlama dilini komut satırından seçerek projenizi oluşturabilirsiniz.
İlgili modülleri indirmek için

npm install

Projeyi çalıştırmak için

npm run dev

Production build almak için

npm run build

Bu komut ile dist klasörüne build dosyalarımız oluşur. Böylece neredeyse sıfır yapılandırma ile proje geliştirebilirsiniz!

ViteJS Projesini Yapılandırma

vite.config.js dosyası üzerinden işlem yapmanız gerekmektedir. Bütün ayarlamalar bu dosya üzerinden yapılır.

ViteJS Eklenti Kurulumu

Farklı ihtiyaçlara yönelik eklenti sistemi mevcuttur. Bunlar sayesinde ViteJS içerisindeki öntanımlı ayarlamalar güncellenebilir. ViteJS Plugin listesi erişmek için buraya tıklayınız.

ÖRNEK:

Desteklenen tarayıcıları tanımlamak için @vitejs/plugin-legacy eklentisi tercih edilebilir. Bu eklenti kurulduktan sonra config dosyasına aşağıdaki tanımlama eklenebilir.

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
}