Vite 6 ile React Projesi Kurma, Yapılandırma ve Production Optimizasyonu Rehberi

Modern frontend geliştirme dünyasında build araçları, geliştirici deneyimini doğrudan etkileyen kritik bileşenlerdir. Vite 6, Evan You tarafından geliştirilen ve her sürümde daha da olgunlaşan bu build aracının en güncel versiyonudur. Bu yazıda Vite 6 ile bir React projesini sıfırdan kuracak, derinlemesine yapılandıracak ve production ortamı için optimize edeceğiz.

Vite 6'da Neler Yeni?

Vite 6, önceki sürümlere kıyasla önemli iyileştirmeler sunmaktadır:

Environment API: Farklı ortamlar (client, SSR, edge) için modül işleme artık çok daha esnek.
Geliştirilmiş HMR Performansı: Büyük projelerde bile milisaniyeler içinde güncelleme.
Rollup 4 Entegrasyonu: Daha hızlı ve verimli production build'leri.
Node.js 18+ Zorunluluğu: Eski Node sürümleri artık desteklenmiyor.
CSS Ön İşleme İyileştirmeleri: Sass, Less gibi preprocessor'lar için daha iyi destek.

1. Projeyi Sıfırdan Oluşturma

Gereksinimler

Başlamadan önce sisteminizde Node.js 18 veya üzeri kurulu olmalıdır:

node --version
# v20.x.x veya üzeri önerilir

Proje Oluşturma

Vite 6 ile yeni bir React projesi oluşturmak için terminalde aşağıdaki komutu çalıştırın:

npm create vite@latest my-react-app -- --template react

TypeScript kullanmak istiyorsanız (şiddetle önerilir):

npm create vite@latest my-react-app -- --template react-ts

Ardından proje dizinine geçip bağımlılıkları yükleyin:

cd my-react-app
npm install
npm run dev

Tarayıcınızda http://localhost:5173 adresini açtığınızda React uygulamanızın çalıştığını göreceksiniz.

Oluşturulan Proje Yapısı

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

2. Gelişmiş Yapılandırma

Temel vite.config.ts Yapılandırması

Vite'ın gücü, esnek yapılandırma sisteminde yatar. İşte kapsamlı bir yapılandırma örneği:

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
  // Ortam değişkenlerini yükle
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      react({
        // Babel yapılandırması (isteğe bağlı)
        babel: {
          plugins: [
            // Styled-components gibi eklentiler buraya
          ],
        },
      }),
    ],

    // Path alias tanımlamaları
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        '@components': resolve(__dirname, './src/components'),
        '@hooks': resolve(__dirname, './src/hooks'),
        '@utils': resolve(__dirname, './src/utils'),
        '@services': resolve(__dirname, './src/services'),
        '@assets': resolve(__dirname, './src/assets'),
      },
    },

    // Geliştirme sunucusu ayarları
    server: {
      port: 3000,
      open: true,
      cors: true,
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },

    // CSS yapılandırması
    css: {
      modules: {
        localsConvention: 'camelCaseOnly',
      },
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/variables" as *;`,
        },
      },
    },

    // Ortam değişkenleri prefix'i
    envPrefix: 'VITE_',
  }
})

TypeScript Path Alias Uyumu

vite.config.ts'de tanımladığınız alias'ların TypeScript tarafından da tanınması gerekir:

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@services/*": ["./src/services/*"],
      "@assets/*": ["./src/assets/*"]
    }
  }
}

Ortam Değişkenleri Yönetimi

Farklı ortamlar için .env dosyaları oluşturun:

# .env
VITE_APP_TITLE=My React App

# .env.development
VITE_API_URL=http://localhost:8080
VITE_DEBUG=true

# .env.production
VITE_API_URL=https://api.myapp.com
VITE_DEBUG=false

TypeScript'te tip güvenliği için:

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_DEBUG: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

3. Production Optimizasyonu

Production build'i, uygulamanızın gerçek kullanıcılara sunulacak halidir. Bu aşamada her kilobayt önemlidir.

Build Yapılandırması

// vite.config.ts - build bölümü
export default defineConfig({
  // ... diğer yapılandırmalar

  build: {
    // Hedef tarayıcılar
    target: 'es2020',

    // Çıktı dizini
    outDir: 'dist',

    // Kaynak haritaları (debugging için)
    sourcemap: false, // Production'da kapatın

    // Minimum dosya boyutu (gzip ile)
    reportCompressedSize: true,

    // Chunk boyut uyarı limiti (kB)
    chunkSizeWarningLimit: 500,

    // CSS kod bölme
    cssCodeSplit: true,

    // Minification ayarları
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,    // console.log'ları kaldır
        drop_debugger: true,   // debugger ifadelerini kaldır
        pure_funcs: ['console.info', 'console.debug'],
      },
      mangle: {
        safari10: true,
      },
    },

    // Rollup özel ayarları
    rollupOptions: {
      output: {
        // Chunk isimlendirme stratejisi
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: ({ name }) => {
          // Dosya türüne göre klasörleme
          if (/\.(gif|jpe?g|png|svg|webp)$/.test(name ?? '')) {
            return 'assets/images/[name]-[hash][extname]'
          }
          if (/\.css$/.test(name ?? '')) {
            return 'assets/css/[name]-[hash][extname]'
          }
          if (/\.(woff2?|eot|ttf|otf)$/.test(name ?? '')) {
            return 'assets/fonts/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        },

        // Manuel chunk bölme stratejisi
        manualChunks: {
          // React çekirdeğini ayrı chunk'a al
          'vendor-react': ['react', 'react-dom'],
          // Router ayrı chunk
          'vendor-router': ['react-router-dom'],
          // UI kütüphanesi ayrı chunk
          // 'vendor-ui': ['@mui/material'],
        },
      },
    },
  },
})

Dinamik Chunk Bölme Stratejisi

Daha gelişmiş bir chunk bölme stratejisi için manualChunks fonksiyon olarak kullanılabilir:

// vite.config.ts
rollupOptions: {
  output: {
    manualChunks(id) {
      // node_modules altındaki paketleri grupla
      if (id.includes('node_modules')) {
        // React ekosistemi
        if (id.includes('react') || id.includes('react-dom') || id.includes('scheduler')) {
          return 'vendor-react'
        }
        // State yönetimi
        if (id.includes('zustand') || id.includes('@tanstack/react-query')) {
          return 'vendor-state'
        }
        // Utility kütüphaneler
        if (id.includes('lodash') || id.includes('date-fns') || id.includes('axios')) {
          return 'vendor-utils'
        }
        // Diğer tüm vendor paketleri
        return 'vendor'
      }
    },
  },
},

Lazy Loading ile Rota Bazlı Kod Bölme

React'te lazy ve Suspense kullanarak route bazlı kod bölme yapabilirsiniz:

// src/App.tsx
import { Suspense, lazy } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@components/Layout'
import LoadingSpinner from '@components/LoadingSpinner'

// Lazy loaded sayfalar
const Home = lazy(() => import('@/pages/Home'))
const Dashboard = lazy(() => import('@/pages/Dashboard'))
const Profile = lazy(() => import('@/pages/Profile'))
const Settings = lazy(() => import('@/pages/Settings'))

function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Suspense fallback={<LoadingSpinner />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </Suspense>
      </Layout>
    </BrowserRouter>
  )
}

export default App

Görsel Optimizasyonu

Görselleri otomatik olarak optimize etmek için vite-plugin-imagemin kullanabilirsiniz:

npm install -D vite-plugin-image-optimizer

// vite.config.ts
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    react(),
    ViteImageOptimizer({
      png: { quality: 80 },
      jpeg: { quality: 75 },
      webp: { lossless: true },
      svg: {
        multipass: true,
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'sortAttrs' },
        ],
      },
    }),
  ],
})

Gzip ve Brotli Sıkıştırma

Statik dosyaları önceden sıkıştırmak için:

npm install -D vite-plugin-compression2

// vite.config.ts
import { compression } from 'vite-plugin-compression2'

export default defineConfig({
  plugins: [
    react(),
    compression({
      algorithm: 'gzip',
      threshold: 1024, // 1kB üzeri dosyaları sıkıştır
    }),
    compression({
      algorithm: 'brotliCompress',
      threshold: 1024,
    }),
  ],
})

4. Build Analizi ve İzleme

Bundle boyutunuzu görselleştirmek için rollup-plugin-visualizer kullanabilirsiniz:

npm install -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      filename: 'dist/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
      template: 'treemap', // sunburst, network, treemap
    }),
  ],
})

Build sonrası dist/stats.html dosyasını açarak her chunk'ın boyutunu ve bağımlılık ağacını interaktif olarak inceleyebilirsiniz.

5. Performance İpuçları ve En İyi Pratikler

Dependency Pre-bundling Optimizasyonu

Vite, node_modules altındaki bağımlılıkları esbuild ile önceden paketler. Bunu optimize edebilirsiniz:

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: [
      'react',
      'react-dom',
      'react-router-dom',
      'axios',
      // Sık kullanılan büyük kütüphaneleri dahil edin
    ],
    exclude: [
      // Pre-bundle'dan hariç tutulacaklar
    ],
  },
})

Production Kontrol Listesi

Production'a çıkmadan önce kontrol etmeniz gereken maddeler:

Console logları temizlendi mi? → drop_console: true
Source map'ler kapatıldı mı? → sourcemap: false
Büyük chunk'lar var mı? → 500kB altında tutun
Görseller optimize edildi mi? → WebP formatını tercih edin
Kullanılmayan bağımlılıklar temizlendi mi? → npm prune
Gzip/Brotli sıkıştırma aktif mi? → Sunucu veya CDN ayarlarını kontrol edin
Tree-shaking çalışıyor mu? → Named export kullanmayı tercih edin

Yararlı npm Komutları

package.json'a ekleyebileceğiniz faydalı script'ler:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview --port 4173",
    "build:analyze": "ANALYZE=true vite build",
    "build:staging": "vite build --mode staging",
    "lint": "eslint . --ext ts,tsx",
    "type-check": "tsc --noEmit"
  }
}

Sonuç

Vite 6, React uygulamaları için sunduğu hız, esneklik ve gelişmiş optimizasyon seçenekleriyle modern frontend geliştirmenin vazgeçilmez araçlarından biri olmaya devam ediyor. Bu yazıda ele aldığımız konuları özetleyecek olursak:

Proje kurulumu: npm create vite@latest ile saniyeler içinde başlangıç.
Yapılandırma: Path alias, proxy, CSS modülleri ve ortam değişkenleri ile esnek bir geliştirme ortamı.
Kod bölme: Manuel chunk stratejileri ve lazy loading ile optimum bundle boyutları.
Sıkıştırma ve görsel optimizasyonu: Gzip, Brotli ve otomatik görsel sıkıştırma ile küçük dosya boyutları.
Build analizi: Visualizer ile bundle yapınızı görselleştirme ve darboğazları tespit etme.

Başarılı bir production optimizasyonu, tek seferlik bir iş değil sürekli bir süreçtir. Uygulamanız büyüdükçe bundle analizi yapın, chunk stratejilerinizi gözden geçirin ve Lighthouse gibi araçlarla performans metriklerinizi düzenli olarak ölçün. Vite 6'nın sunduğu araçlarla bu süreç her zamankinden daha kolay.