İçeriğe atla
devcards.space
ToolsFrontend

Vite Nedir? Yeni Nesil Frontend Geliştirme Aracı

Vite ile native ESM tabanlı, anında başlayan dev server ve şimşek hızında HMR. Kurulum, plugin sistemi, production build ve Webpack ile karşılaştırma.

8 dakika okuma
Vite infografiği: Native ESM dev server, HMR, plugin sistemi ve Webpack ile karşılaştırmayı gösteren 13 bölümlü genel bakış

Vite, modern frontend geliştirme deneyimini yeniden tanımlayan bir build tool ve dev server'dır. Webpack gibi araçların aksine native ES Modules üzerinden çalışarak dev server'ı saniyeler içinde başlatır, milisaniyeler içinde Hot Module Replacement uygular ve production build için Rollup'ı kullanarak optimize çıktı üretir. Bu rehberde infografikteki 13 bölümü açarak Vite'ı baştan sona inceliyoruz.

Vite Nedir?

Modern bir frontend build aracı ve dev server'ıdır. Native ES Modules tabanlıdır ve hızlı dev experience için tasarlanmıştır. React, Vue, Svelte ve daha fazlasını destekler.

  • Modern frontend build tool ve dev server
  • Native ES Modules (ESM) kullanır
  • Hızlı dev deneyimi için tasarlandı
  • React, Vue, Svelte ve daha fazlasını destekler

Neden Vite?

Vite'ın size hazır verdikleri:

  • Anında dev server başlangıcı (no bundling)
  • Şimşek hızında HMR (Hot Module Replacement)
  • Talep üzerine modül yüklemesi (on-demand)
  • Minimal yapılandırma
  • Optimize edilmiş production build

Kurulum (React Örneği)

create-vite ile şablonu seçerek tek komutla başlayın.

bash
npm create vite@latest

Proje Kurulumu

Şablon oluştuktan sonra bağımlılıkları kurup dev server'ı başlatmanız yeterli.

bash
cd my-app
npm install
npm run dev

Dev Server (Temel Fikir)

Vite, dev sırasında hiç bundling yapmaz. Tarayıcı modülleri tek tek native ESM ile yükler; bu nedenle proje büyüklüğü dev başlatma süresini neredeyse hiç etkilemez.

  • Modülleri native ESM ile sunar
  • Sadece ihtiyaç duyulan parça yüklenir
  • Full bundle rebuild yok

Hot Module Replacement (HMR)

Vite yalnızca değişen modülleri günceller. Sayfa yenilenmez, state korunur. Değişiklikler millisaniyeler içinde yansır.

ts
if (import.meta.hot) {
  import.meta.hot.accept();
}

TypeScript Desteği

TypeScript built-in olarak desteklenir; ek konfigürasyon gerekmez. Vite, esbuild ile şimşek hızında transpile yapar.

  • TypeScript için yerleşik destek
  • Ek config yok
  • esbuild ile hızlı transpile

Production Build

Production build için Vite altta Rollup kullanır; tree-shaking, code splitting ve optimize edilmiş statik varlıklar üretir.

bash
npm run build

Plugin Sistemi

Vite'ın esnekliği zengin plugin ekosisteminden gelir. React, Vue, Svelte, ESLint, image optimization gibi sayısız plugin mevcuttur.

vite.config.ts
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Temel Kavramlar

Vite'ın hızını ve mimarisini anlamak için bilmeniz gerekenler:

  • ESM (native modules)
  • Dev server vs build (iki farklı yol)
  • HMR
  • Plugin sistemi
  • Talep üzerine yükleme (on-demand loading)

Vite vs Webpack

İki aracın temel farkları:

  • Vite: bundling yok dev'de, daha hızlı, ESM tabanlı
  • Webpack: dev'de bundle gerekir, daha yavaş, klasik konfigürasyon
  • Vite minimal config gerektirir; Webpack daha fazla esneklik ama daha karmaşık setup

Kullanım Alanları

Vite'ın özellikle parladığı senaryolar:

  • React uygulamaları
  • SPA geliştirme
  • Hızlı prototipleme
  • Modern frontend projeleri
  • Monorepo + workspace setup'ları

Özet

Vite; son derece hızlı dev deneyimi sunar, minimal yapılandırma ile çalışır ve modern frontend iş akışlarına uygundur. ESM + Rollup + esbuild kombinasyonu sayesinde hem geliştirme hem üretimde hız ve performansı bir arada verir; modern projeler için zorlukla aşılabilen bir varsayılan tercihtir.

Sıkça Sorulan Sorular

Bu konuda en çok merak edilenler.

Vite Webpack'in yerine geçer mi?

Pek çok proje için evet. Vite native ESM ile dev'de bundling yapmaz, çok daha hızlı bir deneyim sunar. Webpack'in geniş plugin ekosistemine bağımlı olan projelerde geçiş daha dikkatli planlanmalı.

Tarayıcı uyumluluğu nasıl?

Production build modern tarayıcıları hedefler, ancak @vitejs/plugin-legacy ile eski tarayıcılar için ek bundle üretebilirsiniz. Dev mode için modern tarayıcı (ESM destekli) yeterlidir.

Next.js veya Remix yerine Vite mi?

Sadece SPA istiyorsanız Vite. SSR, dosya tabanlı routing ve framework özellikleri istiyorsanız Next.js veya Remix tercih edilir. Vite + Remix kombinasyonu da yaygındır.

esbuild ve Rollup neden ikisi birden?

esbuild dev'de transpile için kullanılır (Go ile yazıldığı için çok hızlı). Production build'de Rollup kullanılır çünkü tree-shaking ve plugin uyumu daha olgundur.

SSR mümkün mü?

Vite SSR API'si vardır; framework yazmak için kullanılır. Doğrudan ürün geliştiriyorsanız Next.js, Nuxt, SvelteKit gibi Vite tabanlı framework'leri tercih etmek daha kolaydır.

İlgili İçerikler

Bu konuyla bağlantılı diğer infografikler.

Daha fazla developer infografiği keşfedin

Yeni içerikleri kaçırmamak için ana sayfayı ziyaret edin.

Tüm infografikleri gör