Vite 8 Rolldown Migration Rehberi 2026: Rust Tabanlı Bundler ile 10-30x Daha Hızlı Build Nasıl Yapılır?

Vite 8 Nedir ve Neden Önemli? (What is Vite 8?)

Vite 8, popüler frontend build tool'unun (build tool) Mart 2026'da yayınlanan büyük versiyon güncellemesidir. Vite 2'den bu yana en büyük mimari değişiklik (biggest architectural change since Vite 2) Vite 8 ile geliyor: çift bundler yapısı (dual-bundler architecture) yerine artık tek bir Rust tabanlı bundler kullanılıyor — Rolldown.

Önceki sürümlerde Vite, hızlı geliştirme için esbuild, production için ise Rollup kullanıyordu. Bu ikili yaklaşım, dev ortamında gördüğünüz şeyin production'da farklı davranabilmesi gibi tutarsızlıklara yol açıyordu. Alesta Web ekibi olarak müşterilerimizin projelerinde tam olarak bu sorunu defalarca yaşadık. Vite 8 bu sıkıntıyı kökten çözüyor.

Peki neden bu kadar önemli? Çünkü modern web uygulamalarında build süresi doğrudan developer productivity'yi (geliştirici verimliliğini) etkiler. Günde 50 kez build alan bir ekip için 40 saniye fark, günde yaklaşık 33 dakika tasarruf demek. Yılda yüzlerce saate ulaşan bir kazanım.

Rolldown Bundler: Rust Tabanlı Yeni Motor (Rust-Based New Engine)

Rolldown, VoidZero ekibi tarafından geliştirilen Rust dilinde yazılmış modern bir JavaScript bundler'dır (JavaScript bundler written in Rust). Native hızda çalışır ve esbuild seviyesinde performans verir. Benchmark sonuçlarına göre Rollup'a kıyasla 10-30x daha hızlı (10-30x faster than Rollup).

Rolldown'ın temel avantajları:

• ✅ Tek bundler: Hem dev hem production aynı motor
• ✅ Rollup API uyumlu: Mevcut pluginler değişmeden çalışır (existing plugins work)
• ✅ Native Rust: Multi-threaded, sıfır JIT overhead
• ✅ Tree-shaking: Rollup ile aynı seviyede agresif
• ✅ Module Federation: Native destek geliyor

Vite 7 (eski):
  Dev:        esbuild (Go)
  Production: Rollup (JavaScript)
  CSS Min:    esbuild
  JS Transform: esbuild

Vite 8 (yeni):
  Dev + Prod: Rolldown (Rust)
  CSS Min:    Lightning CSS (Rust)
  JS Transform: Oxc (Rust)

Alesta Web olarak şu tespiti yapıyoruz: Tüm araç zinciri Rust'a geçti. Bu, sadece bir hız iyileştirmesi değil — bellek kullanımı, paralelleştirme ve uzun vadeli sürdürülebilirlik açısından da büyük bir kazanım.

Performans Karşılaştırması: Vite 7 vs Vite 8 (Performance Comparison)

Gerçek dünya benchmark'ları üzerinden bakalım. Aşağıdaki tablo, farklı boyutlarda projelerin Vite 7 ve Vite 8 üzerindeki build sürelerini karşılaştırıyor (real-world benchmarks).

Full Bundle Mode özelliği yakında (coming soon) eklenecek. Bu mod ile dev server başlatma 3x daha hızlı, tam reload %40 daha hızlı ve network istekleri 10x daha az olacak.

Breaking Changes (Kırıcı Değişiklikler)

Vite 8'e geçerken karşılaşacağınız breaking changes (kırıcı değişiklikler) aşağıda. Alesta Web rehberinde bu noktalara özellikle dikkat çekiyoruz çünkü migration sırasında en çok hata buradan geliyor.

1. rollupOptions → rolldownOptions

// vite.config.ts (Vite 7)
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] }
      }
    }
  }
})

// vite.config.ts (Vite 8)
export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] }
      }
    }
  }
})

Aynı şekilde worker.rollupOptions da worker.rolldownOptions olarak değişti.

2. import.meta.hot.accept URL Desteği Kaldırıldı

Artık URL geçmek yerine id kullanmalısınız (pass an id instead of URL).

// ❌ Eski (Vite 7) - artık çalışmaz
import.meta.hot.accept('./module.js', (newModule) => {})

// ✅ Yeni (Vite 8) - id kullan
import.meta.hot.accept('module-id', (newModule) => {})

3. Lightning CSS Default Oldu

CSS minification için artık varsayılan olarak Lightning CSS kullanılıyor. esbuild'e dönmek isterseniz:

export default defineConfig({
  build: {
    cssMinify: 'esbuild'  // eski davranış
  }
})

4. JavaScript Transform: Oxc

JavaScript dönüşümü için artık Oxc (Rust tabanlı, esbuild'in halefi) kullanılıyor. Backward compatibility (geriye uyumluluk) için esbuild seçeneği hala çalışıyor ama otomatik olarak Oxc'ye dönüştürülüyor.

5. CJS Interop Değişiklikleri

CommonJS modülleri import ederken bazı kodlar bozulabilir (some existing code may break). Acil çözüm için:

export default defineConfig({
  legacy: {
    inconsistentCjsInterop: true  // geçici, deprecated
  }
})

Önemli: Bu deprecated bir seçenek. Uzun vadede kodunuzu ESM standardına uyumlu hale getirmek en doğrusu.

Yeni Özellikler ve İyileştirmeler (New Features)

1. Built-in tsconfig Paths Desteği

Daha önce vite-tsconfig-paths gibi pluginlere ihtiyaç vardı. Artık Vite 8 native destekliyor:

// vite.config.ts
export default defineConfig({
  resolve: {
    tsconfigPaths: true  // Vite 8'de yeni!
  }
})

Alesta Web tavsiyesi: Bu özelliğin küçük bir performans maliyeti var. Eğer projenizde tsconfig path alias kullanmıyorsanız varsayılan olarak false bırakın.

2. emitDecoratorMetadata Otomatik Desteği

TypeScript'in emitDecoratorMetadata seçeneği artık Vite 8'de otomatik destekleniyor. Angular, NestJS veya TypeORM kullanan projeler için büyük kolaylık.

3. Vite Devtools

Vite 8 ile birlikte built-in Vite Devtools geliyor. Debugging ve analysis için tarayıcıda ek bir panel:

• 📊 Module dependency grafiği
• ⏱️ Build performans analizi (build performance)
• 🔍 Plugin execution timeline
• 🌐 HMR (Hot Module Replacement) izleme

4. Module Federation Native Desteği

Mikro frontend mimarilerinde kullanılan Module Federation, Vite 8'de native olarak destekleniyor. Webpack 5'ten geçiş yapan ekipler için büyük avantaj.

5. Module-Level Persistent Caching

Modül bazında persistent cache (kalıcı önbellek) sayesinde tekrar build'ler ilk build'den dramatik şekilde daha hızlı.

Vite 7 → Vite 8 Migration Adımları (Step by Step Migration)

Alesta Web olarak iki migration stratejisi öneriyoruz. Projenizin karmaşıklığına ve risk toleransına göre birini seçin (pick based on your project complexity).

🚀 Strateji 1: Doğrudan Yükseltme (Direct Upgrade)

Basit projeler için 5 adımda 1 saatten az süre alır (under 1 hour for simple projects).

# npm
npm install vite@^8.0.0 --save-dev

# pnpm
pnpm add -D vite@^8.0.0

# yarn
yarn add -D vite@^8.0.0

# bun
bun add -d vite@^8.0.0

// Tüm rollupOptions → rolldownOptions
// Tüm worker.rollupOptions → worker.rolldownOptions

export default defineConfig({
  build: {
    rolldownOptions: {  // değişti
      output: {
        manualChunks: { /* ... */ }
      }
    }
  }
})

npm run dev
# Beklenen çıktı:
# VITE v8.0.0  ready in 234 ms
# ➜  Local:   http://localhost:5173/

npm run build

# Süreyi karşılaştır:
# Önce: 46s (Vite 7)
# Sonra: 6s (Vite 8) ✅

npm run preview
# Localhost'ta production build'i test et
# Tüm sayfaları gez, console hatası var mı kontrol et

🐢 Strateji 2: Aşamalı Migration (Gradual Migration)

Büyük projeler veya custom plugin kullananlar için önerilen yol (recommended for complex projects).

1. Önce rolldown-vite ile test et: Vite 7 üzerinde rolldown-vite paketini kullanarak Rolldown'ı test et
2. Rolldown'a özel sorunları ayıkla: Plugin uyumsuzlukları varsa burada görülür
3. Sorunsuzsa Vite 8 stable'a geç: Genel upgrade sorunlarından izole edilmiş şekilde

Sık Karşılaşılan Hatalar ve Çözümleri (Common Errors & Solutions)

// Çözüm: vite.config.ts'de
// rollupOptions → rolldownOptions

// Otomatik bulup değiştirmek için:
sed -i 's/rollupOptions/rolldownOptions/g' vite.config.ts

// Eski plugin kullanıyorsa:
npm install esbuild --save-dev

// Modern alternatif (önerilen):
import { transformWithOxc } from 'vite'
// Yerine yeni Oxc API'sini kullan

// "default is not a function" hatası alıyorsanız:
// Geçici çözüm:
export default defineConfig({
  legacy: { inconsistentCjsInterop: true }
})

// Kalıcı çözüm: import'ları ESM'e dönüştürün
// import pkg from 'cjs-module' yerine
// import * as pkg from 'cjs-module'

// import.meta.hot.accept('./url.js', cb) artık çalışmaz
// Yeni kullanım:
if (import.meta.hot) {
  import.meta.hot.accept('module-id', (newModule) => {
    // ...
  })
}

Plugin Uyumluluğu (Plugin Compatibility)

İyi haber: Rolldown, Rollup ile aynı plugin API'sini destekliyor (Rolldown supports the same plugin API as Rollup). Bu yüzden ekosistemdeki çoğu plugin değişiklik gerektirmeden çalışıyor (most plugins work out of the box).

Test Edilmiş ve Çalışan Pluginler

• ✅ @vitejs/plugin-react — Direkt çalışır
• ✅ @vitejs/plugin-vue — Direkt çalışır
• ✅ @vitejs/plugin-svelte — Direkt çalışır
• ✅ vite-plugin-pwa — v0.20+ uyumlu
• ✅ unplugin-auto-import — Direkt çalışır
• ✅ unplugin-icons — Direkt çalışır
• ✅ @tailwindcss/vite — v4+ ile mükemmel

Manuel Müdahale Gerektirenler

• ⚠️ vite-tsconfig-paths — Artık gereksiz, native destek var (no longer needed)
• ⚠️ transformWithEsbuild kullanan eski pluginler → transformWithOxc
• ⚠️ Webpack'ten port edilmiş custom pluginler — manuel review gerekli

Alesta Web uzmanları olarak şu kontrolü öneriyoruz: npm ls vite ile tüm bağımlılıkları listele, her plugin'in Vite 8 uyumluluğunu npm sayfasında veya GitHub'da kontrol et. 5 dakikalık bir iş, saatlerce sorun engelliyor.

Vite 8'i Kimler Kullanmalı? (Who Should Use Vite 8?)

Şu durumlarda Vite 8'e geçmek mantıklı:

• ✅ Production build süreniz 30 saniyeden uzunsa
• ✅ Monorepo veya büyük SPA kullanıyorsanız
• ✅ CI/CD maliyetlerinizi düşürmek istiyorsanız
• ✅ TypeScript projeniz var ve tsconfig paths kullanıyorsanız
• ✅ Decorator metadata gerektiren framework (Angular, NestJS) kullanıyorsanız
• ✅ Module Federation ile mikro frontend yapıyorsanız

Şu durumlarda biraz beklemek daha mantıklı olabilir:

• ⏸️ Çok eski / topluluk desteği zayıf custom plugin kullanıyorsanız
• ⏸️ Mission-critical production sistem (çevrimdışı kalamayacak) ve test süreniz darsa
• ⏸️ Vite 7'de zaten rolldown-vite beta test ortamı kurmadıysanız

📚 Kaynaklar ve Referanslar / Sources and References

Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan derlenmiştir (information from reliable sources):

• Vite Resmi Blog — Announcing Vite 8 — Vite ekibinin resmi duyurusu (official announcement)
• Vite Migration Guide — Resmi migration rehberi (official migration guide)
• Vite 8 Beta Announcement — Beta sürüm değişiklikleri
• Vite CHANGELOG — Detaylı değişiklik kayıtları (detailed changelog)
• Vite GitHub Releases — Tüm release notları

Alesta Web olarak tüm bu bilgileri kendi test ortamlarımızda doğruladık (verified in our test environments). Müşteri projelerinde başarıyla uyguladık.