Code Splitting Nedir?

Code splitting türleri: 1. Route-based splitting — her sayfa için ayrı chunk (Next.js otomatik yapıyor) 2. Component-based splitting — React.lazy + Suspense ile heavy component'ler 3. Vendor splitting — node_modules ayrı chunk'a alınıyor (browser cache'leri uzun süre tutuyor) 4. Dynamic import — kullanıcı bir butona tıkladığında modul yüklensin

Next.js otomatik code splitting: - /pages/about.tsx ve /pages/contact.tsx ayrı chunk'lar — sadece o sayfayı ziyaret edince yüklenir - _app.tsx ve component'ler '_app' ve 'common' chunk'larında - node_modules 'vendors' chunk'ında

Manuel dynamic import: ```typescript import dynamic from 'next/dynamic' const HeavyChart = dynamic(() => import('@/components/HeavyChart'), { loading: () => <Skeleton />, ssr: false, // server-side render etme }) ```

Ne zaman code splitting: - 3rd party library 100KB+ (chart.js, framer-motion, lodash) - Modal/dialog içeriği — sadece açıldığında gerekli - Form validation library — sadece form sayfasında - Heavy widget — LiveSupport, video player, harita

DevPixel'de framer-motion (animation library) 60 dosyada kullanılıyor — bundle size 200KB. Code splitting ile her sayfa sadece kullandığı animasyon component'ini yüklüyor, vendor chunk uzun süre cache'leniyor.