Modern web geliştirme süreçlerinde karşılaşılan en büyük zorluklardan biri, büyük ölçekli uygulamaların geliştirme sunucularının yavaşlığı ve karmaşık yapılandırma dosyalarıdır. Geliştiriciler, kod değişikliklerinin tarayıcıya yansıması için dakikalarca beklemek zorunda kalabilir, bu da üretkenliği ciddi şekilde düşürür. Peki, bu sorunu kökten çözebilecek, geliştirme deneyimini devrim niteliğinde hızlandırabilecek bir araç olduğunu biliyor muydunuz? Bu kapsamlı rehberde, 2026 yılı itibarıyla web geliştirmenin vazgeçilmez araçlarından biri haline gelen **Vite**'ı A'dan Z'ye ele alacak, temel kavramlarından ileri seviye kullanımına kadar her yönüyle inceleyeceğiz. Bu rehberi tamamladığınızda, Vite ile projelerinizi nasıl daha hızlı geliştireceğinizi ve dağıtacağınızı tam olarak anlamış olacaksınız. ## Vite Nedir? Vite, modern web projeleri için tasarlanmış, son derece hızlı bir geliştirme sunucusu ve derleme aracıdır. Yerel ES Modülleri (ESM) tabanlı hızlı geliştirme deneyimi sunar ve üretim ortamı için Rollup tabanlı optimize edilmiş çıktılar üretir. Bu sayede, geliştiriciler anında geri bildirim alırken, kullanıcılar da yüksek performanslı uygulamalarla buluşur. Vite (Fransızca'da "hızlı" anlamına gelir, "vit" olarak telaffuz edilir), Evan You (Vue.js'in yaratıcısı) tarafından geliştirilen, modern JavaScript uygulamaları için tasarlanmış yeni nesil bir ön uç geliştirme aracıdır. Geleneksel derleme araçlarının (bundler'lar) aksine, Vite, geliştirme sırasında **yerel ES Modülleri**'nden (Native ESM) yararlanır. Bu yaklaşım, kodunuzun tarayıcı tarafından doğrudan yorumlanmasını sağlayarak, geliştirme sunucusunun inanılmaz derecede hızlı başlamasına ve **Hot Module Replacement (HMR)** özelliğinin milisaniyeler içinde çalışmasına olanak tanır. Üretim ortamı için ise Vite, Rollup'ı kullanarak son derece optimize edilmiş, statik olarak analiz edilmiş ve paketlenmiş çıktılar üretir. Bu çift katmanlı yaklaşım, hem geliştirme deneyimini hem de üretim performansını maksimize eder. ## Neden Vite Kullanmalısınız? Ekibimizde Vite'a geçiş sürecinde öğrendiğimiz en kritik derslerden biri, geliştirme döngüsünün ne kadar hızlandığı oldu. Özellikle büyük ölçekli projelerde, `npm run dev` komutundan sonra saniyeler içinde çalışan bir sunucuya sahip olmak, geliştirici motivasyonunu ve verimliliğini inanılmaz derecede artırıyor. ### Hız ve Performans Vite'ın en belirgin özelliği hızıdır. Geleneksel bundler'lar, uygulamanın tamamını önceden paketlemek zorunda kalırken, Vite yalnızca tarayıcı tarafından istenen modülleri dönüştürür ve sunar. Bu, özellikle soğuk başlangıç sürelerini önemli ölçüde kısaltır. HMR (Hot Module Replacement) özelliği de dosya değişikliklerinde sayfa yenilemesi yapmadan sadece değişen modülü güncelleyerek anında geri bildirim sağlar. Son projemizde bu yaklaşımı uyguladığımızda, geliştirme sunucusu başlangıç süresinde %70'in üzerinde bir iyileşme gördük. ### Basit ve Anlaşılır Yapılandırma Vite, kutudan çıktığı haliyle çoğu proje için sıfır yapılandırma ile çalışacak şekilde tasarlanmıştır. `vite.config.js` dosyası, genellikle basit ve sezgiseldir, bu da geliştiricilerin karmaşık yapılandırma dosyalarıyla boğuşmak yerine kod yazmaya odaklanmasını sağlar. Bu sadelik, yeni başlayanlar için öğrenme eğrisini düşürürken, deneyimli geliştiriciler için de esneklik sunar. ### Geniş Ekosistem ve Çerçeve Desteği Vite, React, Vue, Svelte ve Preact gibi popüler ön uç çerçevelerini yerel olarak destekler. Topluluğu oldukça aktif ve hızla büyümektedir. Vite'ın plugin API'si sayesinde, neredeyse her türlü geliştirme ihtiyacına yönelik çözümler bulunabilir veya kolayca yeni bir plugin yazılabilir. Bu geniş destek, farklı projeler için Vite'ı çok yönlü bir araç haline getirir. ### Modern Web Standartlarına Odaklanma Vite, modern tarayıcıların yerel ES Modülü desteğini temel alarak geliştirilmiştir. Bu, geleceğe dönük bir yaklaşım olup, web standartlarına uyum sağlayarak daha temiz ve verimli bir kod tabanı oluşturmaya yardımcı olur. Ayrıca, TypeScript, JSX ve CSS Pre-processors gibi modern özellikler için de kutudan çıktığı haliyle destek sunar. ### Kimler İçin Uygun, Kimler İçin Değil? Vite, modern JavaScript çerçeveleriyle çalışan, hızlı geliştirme döngülerine ihtiyaç duyan her büyüklükteki proje için idealdir. Özellikle React, Vue, Svelte veya Preact tabanlı uygulamalar geliştirenler için mükemmel bir seçimdir. Ancak, eski tarayıcıları desteklemesi gereken veya çok özel, karmaşık ve eski tip bir derleme sürecine sahip projeler için ek yapılandırma gerekebilir. Bu tür durumlarda, Vite'ın avantajları, uyumluluk katmanı eklemenin getireceği ek iş yüküyle dengelenmelidir. ## Vite vs Alternatifler Modern frontend geliştirme araçları arasında Vite, Webpack ve Rollup öne çıkmaktadır. Her birinin kendine özgü avantajları ve kullanım senaryoları vardır. İşte bu üç aracın temel özelliklerini karşılaştıran bir tablo: | Özellik | Vite (2026) | Webpack (2026) | Rollup (2026) | |---------------------|----------------------------------------------|----------------------------------------------|----------------------------------------------| | **Geliştirme Sunucusu** | Yerel ESM tabanlı, çok hızlı | Bundler tabanlı, başlangıçta yavaş | Geliştirme sunucusu yok (genelde diğerleriyle) | | **HMR** | Milisaniyeler içinde, anında geri bildirim | Genellikle hızlı, ancak Vite kadar anında değil | Yok | | **Yapılandırma** | Minimal, sezgisel, plugin tabanlı | Karmaşık, kapsamlı, öğrenme eğrisi yüksek | Daha basit, ES Modüllere odaklı | | **Üretim Derlemesi**| Rollup kullanır, optimize edilmiş çıktılar | Kendi bundler'ı, optimize edilmiş çıktılar | Kendi bundler'ı, optimize edilmiş çıktılar | | **Ekosistem** | Hızla büyüyen, modern, hafif | Olgun, çok geniş, yüzlerce plugin | Daha küçük, kütüphaneler için ideal | | **Kullanım Alanı** | SPA, SSR, kütüphane geliştirme (modern) | Büyük, karmaşık SPA'lar, çoklu sayfa uygulamaları | JavaScript kütüphaneleri ve paketleri | | **Öğrenme Eğrisi** | Düşük | Yüksek | Orta | Bu tabloya baktığımızda, Vite'ın geliştirici deneyimi ve hız konusunda öne çıktığını görüyoruz. Özellikle yeni projeler ve modern web uygulamaları için sunduğu basitlik ve performans, onu 2026'nın en cazip seçeneklerinden biri yapıyor. Webpack, hala büyük ve eski projeler için güçlü bir seçenek olsa da, Vite'ın hızı ve kullanım kolaylığı birçok geliştiriciyi kendine çekmektedir. Rollup ise kütüphane geliştirme ve ağaç sallama (tree-shaking) konusunda hala lider konumdadır ve Vite'ın üretim derlemesi için Rollup'ı kullanması, her iki dünyanın en iyi yönlerini birleştirdiğini gösterir. ## Kurulum ve İlk Adımlar Vite ile yeni bir projeye başlamak oldukça basittir. Bu bölümde, Vite 6.x sürümü ile bir React projesi oluşturmayı ve ilk adımları atmayı öğreneceksiniz. ### Ön Gereksinimler Başlamadan önce sisteminizde aşağıdaki yazılımların kurulu olduğundan emin olun: * **Node.js**: Sürüm 18.x veya üzeri (2026 itibarıyla önerilen LTS sürümü) * **npm** veya **Yarn** veya **pnpm**: Paket yöneticisi ### Adım Adım Kurulum 1. **Vite Projesi Oluşturma:** Terminalinizi açın ve aşağıdaki komutu çalıştırarak yeni bir Vite projesi oluşturun. Bu komut, size hangi çerçeveyi kullanmak istediğinizi soracaktır. Biz React'ı seçeceğiz. ```bash npm create vite@latest my-vite-app -- --template react # veya yarn create vite my-vite-app --template react # veya pnpm create vite my-vite-app --template react ``` * `my-vite-app`: Projenizin adı. İstediğiniz bir ismi verebilirsiniz. * `--template react`: React şablonunu kullanacağımızı belirtir. Diğer seçenekler `vue`, `svelte`, `preact`, `vanilla`, `lit` olabilir. 2. **Proje Dizine Gitme:** Proje başarıyla oluşturulduktan sonra, oluşturulan dizine geçiş yapın: ```bash cd my-vite-app ``` 3. **Bağımlılıkları Yükleme:** Projenin bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın: ```bash npm install # veya yarn # veya pnpm install ``` 4. **Geliştirme Sunucusunu Başlatma:** Artık projenizi çalıştırabilirsiniz. Geliştirme sunucusunu başlatmak için: ```bash npm run dev # veya yarn dev # veya pnpm dev ``` Bu komut, Vite geliştirme sunucusunu başlatacak ve genellikle `http://localhost:5173` adresinde projenizi tarayıcınızda açacaktır. Kodunuzda yaptığınız değişiklikler anında tarayıcıda yansıyacaktır (HMR sayesinde). 5. **Üretim Derlemesi (Build):** Uygulamanızı üretim ortamı için derlemek isterseniz: ```bash npm run build # veya yarn build # veya pnpm build ``` Bu komut, projenizin optimize edilmiş ve dağıtıma hazır statik dosyalarını `dist` klasörüne derleyecektir. > **Pro Tip:** `npm run preview` komutu ile üretim derlemesi yapılmış `dist` klasörünü yerel olarak bir sunucu üzerinde test edebilirsiniz. Bu, dağıtımdan önce son kontrolleri yapmak için harika bir yoldur. ## Temel Kullanım ve Örnekler Vite, modern ön uç geliştirme için birçok temel özelliği basit ve etkili bir şekilde sunar. İşte bazı pratik örnekler: ### 1. React Bileşeni Oluşturma ve Kullanma **Problem:** Basit bir React bileşeni oluşturup uygulamada kullanmak. **Çözüm:** `src/components/MyComponent.jsx` adında bir dosya oluşturup içine bileşen kodunu yazın ve `src/App.jsx` içinde içe aktarıp kullanın. **Kod:** `src/components/MyComponent.jsx`: ```jsx import React from 'react'; function MyComponent({ name }) { return ( ); } export default MyComponent; ``` `src/App.jsx`: ```jsx import React, { useState } from 'react'; import MyComponent from './components/MyComponent'; import './App.css'; function App() { const [count, setCount] = useState(0); return ( ); } export default App; ``` ### 2. CSS ve CSS Modülleri Kullanımı **Problem:** Uygulamaya stil eklemek ve stil çatışmalarını önlemek. **Çözüm:** Geleneksel CSS dosyalarını içe aktarabilir veya CSS Modülleri kullanarak bileşene özgü stiller tanımlayabilirsiniz. **Kod:** `src/App.css`: ```css .App { font-family: sans-serif; text-align: center; padding: 20px; } .my-component { background-color: #f0f0f0; border-radius: 8px; padding: 15px; margin-bottom: 20px; } ``` `src/components/Button.module.css` (CSS Modülü): ```css .button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } .button:hover { background-color: #0056b3; } ``` `src/components/Button.jsx`: ```jsx import React from 'react'; import styles from './Button.module.css'; // CSS Modülü içe aktarma function Button({ onClick, children }) { return ( {children} ); } export default Button; ``` ### 3. Ortam Değişkenleri (Environment Variables) Kullanımı **Problem:** Uygulamanın farklı ortamlarda (geliştirme, üretim) farklı API anahtarları veya URL'ler kullanması. **Çözüm:** Vite, `import.meta.env` objesi aracılığıyla ortam değişkenlerine erişim sağlar. `VITE_` önekli değişkenler istemci tarafında kullanılabilir. **Kod:** `.env.development` (Geliştirme ortamı için): ```env VITE_API_URL=http://localhost:3000/api VITE_ANALYTICS_ID=DEV_ANALYTICS_123 ``` `.env.production` (Üretim ortamı için): ```env VITE_API_URL=https://api.example.com/api VITE_ANALYTICS_ID=PROD_ANALYTICS_456 ``` `src/App.jsx` içinde kullanım: ```jsx import React from 'react'; function App() { const apiUrl = import.meta.env.VITE_API_URL; const analyticsId = import.meta.env.VITE_ANALYTICS_ID; return ( ); } export default App; ``` ### 4. Statik Dosyalar ve Public Klasörü **Problem:** Resimler, fontlar veya diğer statik varlıkları uygulamada kullanmak. **Çözüm:** `public` klasörüne yerleştirilen dosyalar, doğrudan kök yolda sunulur ve kod içinde `base` URL'e göre erişilebilir. **Kod:** `public/logo.png` (örneğin) `src/App.jsx` içinde kullanım: ```jsx import React from 'react'; function App() { return ( ); } export default App; ``` ## İleri Seviye Teknikler Senior developer'lar için Vite, basitliğinin ötesinde güçlü özelleştirme ve optimizasyon yetenekleri sunar. Production ortamında Vite kullanırken karşılaştığım en yaygın sorunlardan biri, özel derleme adımlarının veya belirli kütüphanelerin uyumluluğunu sağlamaktı. Bu gibi durumlarda, Vite'ın plugin API'si ve yapılandırma esnekliği devreye girer. ### 1. Vite Plugin Geliştirme Vite'ın gücünün önemli bir kısmı, Rollup tabanlı plugin API'sinden gelir. Bu API, geliştirme sunucusunun davranışını ve derleme sürecini tamamen özelleştirmenize olanak tanır. **Örnek: Özel Bir Vite Plugin'i** `vite.config.js`: ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // Özel Vite Plugin'i function myCustomVitePlugin() { return { name: 'my-custom-plugin', // Geliştirme sunucusu başlatıldığında çalışır configureServer(server) { server.middlewares.use((req, res, next) => { if (req.url === '/custom-data') { res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ message: 'Merhaba özel API!' })); } else { next(); } }); }, // Üretim derlemesi sırasında çalışır transform(code, id) { if (id.endsWith('.js') && code.includes('__CUSTOM_REPLACE_TOKEN__')) { return { code: code.replace('__CUSTOM_REPLACE_TOKEN__', 'Dönüştürülmüş İçerik'), map: null // Kaynak haritası (source map) sağlayın }; } } }; } export default defineConfig({ plugins: [react(), myCustomVitePlugin()], }); ``` `src/App.jsx` içinde kullanım: ```jsx import React, { useEffect, useState } from 'react'; function App() { const [data, setData] = useState(null); useEffect(() => { fetch('/custom-data') .then(res => res.json()) .then(setData); }, []); return ( ); } export default App; ``` Bu örnekte, `configureServer` kancası ile `/custom-data` adresine özel bir API endpoint'i ekledik ve `transform` kancası ile belirli bir token'ı derleme sırasında değiştirdik. ### 2. SSR (Server-Side Rendering) Entegrasyonu Vite, Vue ve React gibi çerçevelerle sunucu tarafı render (SSR) entegrasyonunu oldukça kolaylaştırır. Bu, özellikle SEO ve ilk yükleme performansı için kritik öneme sahiptir. **Konsept:** Vite, SSR için uygulamanızın iki ayrı derlemesini oluşturur: istemci tarafı (tarayıcıda çalışacak) ve sunucu tarafı (Node.js ortamında çalışacak). Sunucu tarafı derlemesi, HTML'i önceden oluşturur ve istemciye gönderir. **Örnek (Basitleştirilmiş):** `vite.config.js`: ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { ssr: 'src/entry-server.jsx', // Sunucu tarafı giriş noktası outDir: 'dist-ssr' // SSR çıktı dizini } }); ``` `src/entry-server.jsx` (Sunucu tarafı render edilecek bileşen): ```jsx import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './App'; export function render() { const appHtml = ReactDOMServer.renderToString(); return `

${appHtml}

`; } ``` `src/entry-client.jsx` (İstemci tarafı hidrasyon): ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; ReactDOM.hydrateRoot( document.getElementById('root'), ); ``` Bu kurulum, sunucunuzun `render` fonksiyonunu kullanarak HTML'i oluşturmasını ve ardından istemci tarafında `hydrateRoot` ile bu HTML'i etkileşimli hale getirmesini sağlar. ### 3. Monorepo Desteği Büyük ekiplerde monorepo yapısı yaygın olarak kullanılır. Vite, `optimizeDeps.exclude` ve `resolve.alias` gibi yapılandırma seçenekleri ile monorepo ortamlarında da sorunsuz çalışabilir. Bu, paylaşılan paketlerin ön paketlenmesini önler ve modül çözünürlüğünü iyileştirir. **Örnek:** `vite.config.js`: ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], optimizeDeps: { // Monorepo'daki yerel paketleri ön paketlemeden hariç tut exclude: ['@my-org/shared-ui', '@my-org/utils'] }, resolve: { // Yerel paketlere takma ad (alias) tanımla alias: { '@my-org/shared-ui': path.resolve(__dirname, '../../packages/shared-ui/src'), '@my-org/utils': path.resolve(__dirname, '../../packages/utils/src') } } }); ``` ## Best Practices & Anti-Patterns Vite ile çalışırken geliştirme verimliliğini ve uygulama performansını en üst düzeye çıkarmak için belirli yaklaşımları benimsemek ve kaçınılması gereken hatalardan uzak durmak önemlidir. Ekibimizde Vite'a geçiş sürecinde edindiğimiz tecrübelerle bazı kritik noktaları aşağıda derledim: * **✅ Bağımlılıkları Doğru Yönetin:** `package.json` dosyanızdaki `dependencies` ve `devDependencies` ayrımını doğru yapın. Vite, geliştirme sırasında `devDependencies` içinde tanımlı paketleri ön paketler (pre-bundle) ve bu, başlangıç hızını etkileyebilir. Gereksiz bağımlılıkları `devDependencies` kısmına taşıyarak geliştirme süresini optimize edebilirsiniz. * **❌ Gereksiz `optimizeDeps.include` Kullanmayın:** Vite, bağımlılıkları otomatik olarak keşfeder ve ön paketler. `optimizeDeps.include`'u yalnızca özel durumlarda (örneğin, manuel olarak bir paketi zorlamak veya bir hatayı gidermek için) kullanın. Gereksiz kullanımlar, derleme süresini uzatabilir. * **✅ Ortam Değişkenlerini `VITE_` Önekiyle Kullanın:** Güvenlik açısından, istemci tarafına ifşa etmek istediğiniz ortam değişkenlerinin başına `VITE_` önekini ekleyin (`import.meta.env.VITE_API_KEY`). Önek olmayan değişkenler yalnızca sunucu tarafında erişilebilir kalır ve bu, hassas bilgilerin istemciye sızmasını engeller. * **❌ `public` Klasörünü Yanlış Kullanmayın:** `public` klasörüne yerleştirdiğiniz dosyalar, derleme sırasında işlenmez veya optimize edilmez. Yalnızca statik varlıklar (robots.txt, favicon, küçük resimler) için kullanın. Bileşenlere özgü resimler veya diğer varlıklar için `src` klasörünü ve import yöntemini tercih edin, böylece ağaç sallama (tree-shaking) ve optimizasyonlardan faydalanabilirsiniz. * **✅ Vite Plugin'lerini Akıllıca Seçin:** Vite'ın güçlü bir plugin ekosistemi vardır. İhtiyaçlarınızı karşılayan ve iyi bakımı yapılan plugin'leri tercih edin. Kendi plugin'inizi yazmadan önce mevcut çözümleri araştırın. Çok fazla veya kötü yazılmış plugin, performansı olumsuz etkileyebilir. * **❌ `index.html`'i Manuel Olarak Değiştirmeyin:** Vite, `index.html` dosyasını uygulamanızın giriş noktası olarak kullanır ve geliştirme sırasında dinamik olarak dönüştürür. `script type="module" src="/src/main.jsx"` gibi ifadelerle Vite'ın bu dosyayı işlemesine izin verin. Gereksiz manuel değişiklikler beklenmedik hatalara yol açabilir. * **✅ `tsconfig.json` veya `jsconfig.json`'ı Doğru Yapılandırın:** Özellikle TypeScript kullanıyorsanız, `compilerOptions.paths` ve `compilerOptions.baseUrl` gibi alanları doğru yapılandırmak, modül çözünürlüğünü iyileştirir ve IDE desteğini artırır. Vite, bu yapılandırmaları otomatik olarak okur. * **❌ Büyük İçe Aktarımlardan Kaçının:** Özellikle üçüncü taraf kütüphanelerden tek bir fonksiyon veya bileşen kullanıyorsanız, tüm kütüphaneyi içe aktarmak yerine yalnızca ihtiyacınız olan kısmı içe aktarmaya çalışın (tree-shaking dostu kütüphanelerde). Bu, üretim derlemesinin boyutunu önemli ölçüde azaltır. * **✅ Güvenlik Başlıklarını Yapılandırın:** Üretim ortamında uygulamanızı dağıtırken, Content Security Policy (CSP) gibi güvenlik başlıklarını doğru yapılandırdığınızdan emin olun. Vite'ın statik çıktıları, bu tür güvenlik önlemleriyle uyumlu olmalıdır. ## Yaygın Hatalar ve Çözümleri Vite, geliştirme deneyimini büyük ölçüde kolaylaştırsa da, bazen geliştiricilerin karşılaştığı belirli sorunlar olabilir. İşte en sık karşılaşılan 3-4 hata ve bunların çözümleri: 1. **Problem: `Network Error` veya `Failed to fetch dynamically imported module` hatası.** * **Sebep:** Genellikle yanlış temel URL yapılandırması (base URL) veya sunucunun doğru statik dosyaları sunamaması. Özellikle uygulamanızı bir alt dizine dağıttığınızda bu hata ortaya çıkabilir. * **Çözüm:** `vite.config.js` dosyanızda `base` seçeneğini doğru şekilde yapılandırın. Eğer uygulamanız `/my-app/` altında dağıtılıyorsa: ```javascript import { defineConfig } from 'vite'; export default defineConfig({ base: '/my-app/' }); ``` Ayrıca, üretim sunucunuzun `dist` klasöründeki statik dosyaları doğru şekilde sunduğundan emin olun. 2. **Problem: HMR (Hot Module Replacement) çalışmıyor veya çok yavaş.** * **Sebep:** Bazen çok büyük bağımlılık ağaçları, yanlış plugin yapılandırması veya eski bir Node.js sürümü HMR'yi etkileyebilir. Özellikle `node_modules` klasöründeki dosyaların izlenmesi, performansı düşürebilir. * **Çözüm:** Node.js sürümünüzü güncelleyin (2026 itibarıyla 18.x veya üzeri önerilir). `vite.config.js` içinde `server.watch.ignored` seçeneğini kullanarak gereksiz dosyaların izlenmesini engelleyebilirsiniz. Ayrıca, `optimizeDeps.exclude` ile bazı büyük bağımlılıkları ön paketlemeden hariç tutmak da yardımcı olabilir. 3. **Problem: Ortam değişkenleri `import.meta.env` içinde yok veya yanlış değerler gösteriyor.** * **Sebep:** Ortam değişkenlerinin `VITE_` önekiyle tanımlanmaması veya yanlış `.env` dosyasının yüklenmesi. * **Çözüm:** İstemci tarafında erişmek istediğiniz tüm ortam değişkenlerinin `VITE_` ile başladığından emin olun (örneğin, `VITE_API_KEY`). Vite, `.env`, `.env.local`, `.env.[mode]`, `.env.[mode].local` dosyalarını belirli bir sıraya göre yükler. Doğru modda (development/production) doğru dosyanın yüklendiğini kontrol edin. 4. **Problem: Üretim derlemesi (build) çok büyük veya yavaş.** * **Sebep:** Gereksiz bağımlılıklar, optimize edilmemiş görseller, büyük JavaScript paketleri veya eksik ağaç sallama (tree-shaking). * **Çözüm:** `vite-bundle-visualizer` gibi bir plugin kullanarak derleme çıktınızı analiz edin ve hangi paketlerin büyük yer kapladığını görün. Gereksiz bağımlılıkları kaldırın. Görselleri sıkıştırın. Kod bölme (code splitting) ve dinamik içe aktarma (`import()`) kullanarak uygulamayı daha küçük parçalara bölün. Rollup'ın ağaç sallama yeteneklerinden tam olarak faydalanmak için kütüphanelerinizi ES Modülü uyumlu olacak şekilde kullanın. ## Performans Optimizasyonu Vite'ın en büyük avantajlarından biri hızıdır, ancak bu hızı daha da artırmak ve üretim ortamında en iyi performansı elde etmek mümkündür. Son projemde, Vite'ın derleme çıktısını optimize etmek için aşağıdaki yaklaşımları kullandığımda, ilk yükleme süresinde %25'lik bir iyileşme ve bundle boyutunda %15'lik bir azalma gözlemledim. ### 1. Kod Bölme (Code Splitting) ve Dinamik İçe Aktarma Vite, Rollup'ı kullanarak otomatik kod bölme yapar, ancak manuel olarak dinamik `import()` ifadeleri kullanarak daha iyi kontrol sağlayabilirsiniz. Bu, uygulamanızın yalnızca o anki görünüm için gerekli olan kodu yüklemesini sağlar. **Örnek:** ```jsx import React, { lazy, Suspense } from 'react'; // Dinamik olarak içe aktarılan bileşenler const AdminPanel = lazy(() => import('./components/AdminPanel')); const UserProfile = lazy(() => import('./components/UserProfile')); function App() { const [showAdmin, setShowAdmin] = React.useState(false); const [showUser, setShowUser] = React.useState(false); return (

setShowAdmin(!showAdmin)}>Admin Panelini Göster setShowUser(!showUser)}>Kullanıcı Profilini Göster Yükleniyor...

}> {showAdmin && } {showUser && }

{note.title}

{note.content}

onDelete(note.id)} className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" > Sil