React.lazy ve Suspense ile kod bölme (code splitting) nasıl yapılır?

Büyük uygulamalarda tüm kodu tek pakette göndermek ilk yüklemeyi yavaşlatır. React.lazy, bir bileşeni ihtiyaç duyulduğunda ayrı bir dosyadan yükler; Suspense yüklenirken gösterilecek arayüzü belirler.

const AdminPaneli = React.lazy(() => import("./AdminPaneli"));
const Grafikler = React.lazy(() => import("./Grafikler"));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/admin" element={<AdminPaneli />} />
        <Route path="/rapor" element={<Grafikler />} />
      </Routes>
    </Suspense>
  );
}

En verimli bölme noktaları sayfa (route) sınırları ve nadiren açılan ağır bileşenlerdir (editör, grafik, harita). Next.js'te sayfalar otomatik bölünür; bileşen düzeyinde next/dynamic kullanılır.