Vite: Eklenti Sistemi ve SSR Modu
transform ve load kancalarıyla bir Vite eklentisi yazmayı, üçüncü taraf eklentileri entegre etmeyi ve Vite'ı ssrBuild seçeneğiyle sunucu tarafı işleme için yapılandırmayı öğrenin.
Vite: Eklenti Sistemi ve SSR Modu, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Vite Neden Kazandı?
Vite (Fransızcada 'hızlı' anlamına gelir), Evan You tarafından oluşturuldu. Geliştirme sırasında kaynak dosyalarını yerel ES modülleri aracılığıyla paketlemeden sunar — soğuk başlangıçlar anında gerçekleşir. Üretimde paketleme için Rollup kullanılır. Geliştirici deneyimi Webpack'ten çok daha hızlıdır.
Vite'ın Geliştirme Sunucusu Nasıl Çalışır?
Modern tarayıcılar ES modüllerini yerel olarak destekler. Vite, kaynak dosyalarınızı olduğu gibi sunar ve TypeScript/JSX'i isteğe bağlı olarak dönüştürür. Paketleme yapılmaması, soğuk başlangıçlarda bekleme olmaması demektir.
Sıcak Modül Değiştirme
HMR, sayfayı yeniden yüklemeden modülleri değiştirir. Vite'ın HMR'ı ESM üzerine kuruludur ve Webpack'inkinden çok daha hızlıdır. Çoğu çatı (React, Vue, Svelte), durumun korunmasıyla bileşen düzeyinde güncellemeler yapmak için HMR'a bağlanır.
Vite Yapılandırmasının Temelleri
Proje kökünde bulunan vite.config.ts üzerinden yapılandırın.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 5173 },
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom']
}
}
}
}
});Eklenti Sistemi
Vite eklentileri, geliştirme sunucusu için ek kancalar içeren Rollup eklentilerinin genişletilmiş hâlidir. Eklenti, adlandırılmış kancalara sahip bir nesnedir (veya böyle bir nesne döndüren işlevdir).
// myPlugin.ts
export default function myPlugin() {
return {
name: 'my-plugin',
transform(code, id) {
if (!id.endsWith('.mdx')) return null;
// transform MDX to JS:
return { code: compileMdx(code), map: null };
},
handleHotUpdate(ctx) {
// react to file changes
}
};
}
// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };Temel Kancalar
transform(code, id): dosya içeriğini değiştirir (ör. MDX'i derler, ortam değişkenlerini ekler). load(id): sanal modüller için içerik sağlar. resolveId(source): modül çözümlemesini özelleştirir. configureServer(server): geliştirme sunucusuna ara yazılım ekler.
Popüler Eklentiler
@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (SVG'leri bileşen olarak içe aktarır). vite-plugin-checker (kaplama içinde TypeScript / ESLint). vite-plugin-mkcert (yerel HTTPS).
Vite SSR Modu
Vite, düşük seviyeli yapıtaşlarıyla sunucu tarafı oluşturmayı destekler. Nuxt, SvelteKit, Remix ve Astro gibi çatılar bunun üzerine kuruludur. Özel SSR için Vite'ın SSR kılavuzunu izleyin.
// server.ts
import { createServer } from 'vite';
const vite = await createServer({
server: { middlewareMode: true },
appType: 'custom'
});
express()
.use(vite.middlewares)
.use('*', async (req, res) => {
const url = req.originalUrl;
let template = await readFile('index.html', 'utf-8');
template = await vite.transformIndexHtml(url, template);
const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
const appHtml = await render(url);
res.send(template.replace('<!--app-html-->', appHtml));
});SSR için Derleme
İki derleme yapılır: istemci ve sunucu. vite build --ssr entry-server.ts, sunucu paketini oluşturur.
// package.json
"scripts": {
"build:client": "vite build",
"build:server": "vite build --ssr src/entry-server.ts",
"build": "npm run build:client && npm run build:server"
}Ortam Değişkenleri
import.meta.env.MODE, geliştirme veya üretim değerlerinden biridir. VITE_ ön ekine sahip özel değişkenler sunulur.
CSS İşleme
Vite, CSS'i, CSS Modüllerini (foo.module.css), PostCSS'i (postcss.config.js dosyasını otomatik olarak keşfeder) ve CSS önişlemcilerini (Sass, Less, Stylus) kutudan çıktığı hâliyle işler. Kritik CSS'i eklentiler aracılığıyla ekleyin.
Vite ve Webpack ve Turbopack Karşılaştırması
Vite: ESM tabanlı geliştirme, Rollup derlemeleri, geniş ekosistem. Webpack: eski ve büyük, daha fazla yapılandırılabilirlik, daha yavaş. Turbopack (Vercel): Rust tabanlı, Webpack uyumlu, şu anda Next ile birlikte paketlenir. Yeni projeler için: SPA'larda Vite, Next'e özgü projelerde Next/Turbopack.
Hızlı Kontrol
Vite'ın geliştirme sunucusunun soğuk başlangıcı neden Webpack'inkinden çok daha hızlıdır?
Özet: Vite
ESM tabanlı geliştirme sunucusu: anında soğuk başlangıç, hızlı HMR. Üretimde Rollup kullanılır. Eklentiler, Rollup kancalarını (transform, load, resolveId) ve Vite'a özgü kancaları (configureServer, handleHotUpdate) genişletir. SSR modu createServer + middlewareMode aracılığıyla kullanılır; --ssr ile derleme yapılır. PWA, MDX, SVGR ve mkcert eklentileri. Ortam değişkenleri için import.meta.env. CSS Modülleri, PostCSS ve önişlemciler yerleşik olarak gelir.
Sıkça Sorulan Sorular
“Vite: Eklenti Sistemi ve SSR Modu” dersi ücretsiz mi?
Evet — “Vite: Eklenti Sistemi ve SSR Modu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Vite: Eklenti Sistemi ve SSR Modu” dersinde ne öğreneceğim?
transform ve load kancalarıyla bir Vite eklentisi yazmayı, üçüncü taraf eklentileri entegre etmeyi ve Vite'ı ssrBuild seçeneğiyle sunucu tarafı işleme için yapılandırmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Vite: Eklenti Sistemi ve SSR Modu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vite: Eklenti Sistemi ve SSR Modu
- esbuild: Hız ve Sınırlamalar
- Monorepo'lar için pnpm Workspaces
- Turbo: Önbelleğe Alma ve Görev İşlem Hatları