Vite Best Practices: Mobil Web Uygulama Geliştirme Rehberi
Yazar: Burak Balkı | Kategori: Mobile Development | Okuma Süresi: 8 dk
Vite kullanarak yüksek performanslı mobil web uygulamaları geliştirmek için en iyi uygulamalar, yapılandırma stratejileri ve optimizasyon tekniklerini içeren...
## Vite ile Mobil Web Uygulamalarında Performans ve Verimlilik
**Vite**, modern web geliştirme ekosisteminde hız ve verimlilik odaklı bir yapılandırma aracı olarak öne çıkmaktadır. Özellikle kaynak kısıtlı mobil cihazlar için geliştirilen web uygulamalarında, düşük gecikme süresi ve optimize edilmiş paket boyutları kritik öneme sahiptir. Bu rehber, Vite'in mobil geliştirme süreçlerindeki en iyi uygulama (best practices) standartlarını kapsamlı bir şekilde ele almaktadır.
## Temel Kavramlar ve Vite Mimarisi
Vite, geleneksel paketleyicilerin (webpack gibi) aksine, geliştirme aşamasında tarayıcının yerel **ES Modules (ESM)** desteğinden faydalanır. Bu durum, projenin büyüklüğünden bağımsız olarak anlık sunucu başlatma süreleri sağlar.
- **Native ESM:** Tarayıcının modülleri doğrudan talep etmesi, önceden paketleme ihtiyacını ortadan kaldırır.
- **HMR (Hot Module Replacement):** Kod değişikliklerinin tarayıcıyı yenilemeden yansıtılması, mobil arayüz geliştirmede büyük zaman kazandırır.
- **Rollup Tabanlı Build:** Üretim aşamasında son derece optimize edilmiş statik varlıklar oluşturur.
## Vite Kurulumu ve Mobil Odaklı Başlangıç
Mobil öncelikli bir proje başlatırken, Vite'in sunduğu şablonlar temel yapı taşını oluşturur. Terminal üzerinden aşağıdaki komutla temiz bir başlangıç yapılabilir:
```bash
npm create vite@latest my-mobile-app -- --template react-ts
cd my-mobile-app
npm install
```
Mobil cihazlarda test yapabilmek için Vite sunucusunun yerel ağda yayınlanması gerekir. Bunun için `package.json` dosyasındaki script'i güncelleyin:
```json
"scripts": {
"dev": "vite --host"
}
```
## Vite Yapılandırması (vite.config.ts) Optimizasyonu
Kurumsal bir projede dizin yapısını yönetmek ve modül erişimini kolaylaştırmak için **Alias** kullanımı standarttır. Bu, özellikle derin klasör yapısına sahip mobil projelerde okunabilirliği artırır.
```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@styles': path.resolve(__dirname, './src/styles'),
},
},
});
```
## Mobil Cihazlar İçin Varlık (Asset) Yönetimi
Mobil ağlar (4G/5G) değişkenlik gösterebilir. Bu nedenle görsellerin ve statik dosyaların yönetimi performansı doğrudan etkiler. Vite, varlıkları otomatik olarak optimize eder ancak belirli eşik değerleri (threshold) belirlemek faydalıdır.
```typescript
export default defineConfig({
build: {
assetsInlineLimit: 4096, // 4kb altındaki dosyaları Base64 olarak gömer
rollupOptions: {
output: {
assetFileNames: 'assets/[name]-[hash][extname]',
chunkFileNames: 'chunks/[name]-[hash].js',
entryFileNames: 'entry/[name]-[hash].js',
},
},
},
});
```
## Gelişmiş Kod Bölümleme (Code Splitting) Stratejileri
Mobil kullanıcıların yalnızca ihtiyaç duydukları kodu indirmelerini sağlamak için **Manual Chunks** özelliğini kullanmalısınız. Bu, ana paket boyutunu (main bundle) küçültür.
```typescript
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('react')) return 'vendor-react';
if (id.includes('framer-motion')) return 'vendor-animation';
return 'vendor';
}
},
},
},
}
```
## PWA (Progressive Web App) Entegrasyonu
Mobil web uygulamalarını bir mobil uygulama deneyimine dönüştürmek için `vite-plugin-pwa` kullanımı en iyi uygulamadır. Bu, çevrimdışı çalışma ve ana ekrana ekleme özelliklerini sağlar.
```typescript
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Mobile Enterprise App',
short_name: 'MobApp',
theme_color: '#ffffff',
icons: [
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
]
}
})
]
});
```
## Mobil Tarayıcılar İçin CSS ve PostCSS Yapılandırması
Mobil cihazlarda farklı tarayıcı motorları (WebKit, Blink) bulunur. CSS uyumluluğu için Vite içinde PostCSS yapılandırılmalıdır.
```javascript
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375, // iPhone X standart genişliği
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: ['.ignore'],
minPixelValue: 1,
mediaQuery: false,
},
},
};
```
## Ortam Değişkenleri ve Güvenlik
Mobil uygulama API uç noktalarını yönetirken `.env` dosyaları kullanılmalıdır. Vite, sadece `VITE_` ön ekiyle başlayan değişkenleri istemci tarafına açar.
```env
# .env.production
VITE_API_URL=https://api.kurumsal-mobil.com
VITE_APP_TIMEOUT=5000
```
Uygulama içinde erişim:
```typescript
const apiUrl = import.meta.env.VITE_API_URL;
```
## Mobil Hata Ayıklama (Debugging) ve Proxy Kullanımı
Geliştirme sırasında mobil cihazınızdan yerel API sunucunuza erişmek için CORS sorunlarını aşmak adına proxy yapılandırması gereklidir.
```typescript
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
}
```
## Performans İpuçları ve Optimizasyon Tablosu
Mobil cihazlarda yüksek performans elde etmek için aşağıdaki metrikleri takip edin:
| Özellik | Önerilen Yöntem | Fayda |
| :--- | :--- | :--- |
| **Görsel Formatı** | WebP veya AVIF | %30-50 daha küçük dosya boyutu |
| **Font Yönetimi** | `font-display: swap` | Metinlerin hızlı görünmesi |
| **Bundle Boyutu** | Gzip veya Brotli | Daha hızlı veri transferi |
| **Tree Shaking** | Kullanılmayan kodları temizle | Daha az JavaScript işleme yükü |
## Sık Yapılan Hatalar
1. **Gereksiz Büyük Paketler:** Tüm kütüphaneleri ana pakete dahil etmek mobil açılış hızını öldürür. Dinamik import (`import()`) kullanın.
2. **Yanlış Asset Yolları:** Mobil build alırken base path (`/`) ayarının yanlış yapılması statik dosyaların yüklenmemesine neden olur.
3. **Polyfill Eksikliği:** Eski mobil tarayıcılar (örneğin iOS 12) modern JS özelliklerini desteklemeyebilir. `@vitejs/plugin-legacy` kullanılmalıdır.
```typescript
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
});
```
## Sık Sorulan Sorular
1. **Vite neden Webpack'ten daha hızlı?**
Vite, geliştirme modunda paketleme yapmaz; tarayıcıya doğrudan ESM modülleri gönderir ve sadece değişen dosyayı günceller.
2. **Mobil cihazımda localhost'u nasıl görebilirim?**
`vite --host` komutuyla sunucuyu başlatmalı ve mobil cihazınızla aynı Wi-Fi ağında bulunarak bilgisayarınızın IP adresini tarayıcıya girmelisiniz.
3. **Production build'ı neden Rollup kullanıyor?**
Rollup, ağaç sallama (tree-shaking) ve paket optimizasyonu konusunda şu an için ESM ekosistemindeki en verimli araçtır.
4. **Vite ile büyük ölçekli kurumsal projeler geliştirilebilir mi?**
Evet, Vite'in modüler yapısı ve güçlü plugin ekosistemi kurumsal ölçekteki monorepo veya mikro-frontend yapılarını destekler.
5. **Vite'te TypeScript yapılandırması nasıl olmalı?**
Vite TypeScript'i sadece transpile eder (tip kontrolü yapmaz). Tip kontrolü için geliştirme sırasında `tsc --watch` veya `vite-plugin-checker` kullanılmalıdır.
## Özet ve Sonuç
Vite, mobil web geliştirme süreçlerinde hızı ve modern standartları bir araya getiren güçlü bir araçtır. **Native ESM**, **akıllı kod bölümleme** ve **PWA desteği** gibi özelliklerin doğru yapılandırılması, kullanıcı deneyimini doğrudan iyileştirir. Bu rehberdeki en iyi uygulamaları takip ederek, hem geliştirici verimliliğini artırabilir hem de son kullanıcı için yüksek performanslı mobil çözümler sunabilirsiniz.