Frontend Academy · Ders

Kod Bölme ve Tembel Rotalar

Paketi rota sınırlarında bölmek için dynamic import() kullanın, React ve Vue bileşenlerini tembel yükleyin ve derleme çıktısında parça boyutlarını izleyin.

Kod Bölme ve Tembel Rotalar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.

Kod Neden Bölünür?

Tek parça bir JavaScript paketi, uygulamanızdaki her kod satırını, ziyaretçilerin hiç kullanmayacağı özellikler için bile, her ziyaretçinin indirmesini zorunlu kılar. Kod bölme, paketi gerektiğinde yüklenen parçalara ayırır.

Dinamik İçe Aktarma

import('./module'), modüle çözümlenen bir Promise döndürür. Paketleyiciler (Vite, webpack) bunu görür ve çalışma zamanında yüklenen ayrı bir parça oluşturur.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — Bileşen Düzeyinde Bölme

React.lazy(() => import('./Heavy')), kodunu yalnızca ilk kez görüntülendiğinde yükleyen bir bileşen oluşturur. Yükleme sırasında bir geri dönüş göstermek için bunu <Suspense> ile sarın.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

React Router'da Rota Tabanlı Bölme

Her rota kendi parçasına sahip olur; kullanıcılar yalnızca ziyaret ettikleri sayfaların kodunu indirir.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Vue 3 Asenkron Bileşenleri

Vue, aynı düzen için defineAsyncComponent sunar.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Vue Router'da Gecikmeli Rotalar

Vue Router, rota tanımlarında dinamik içe aktarmaları destekler; her rota için ayrı parçalar oluşturulur.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Webpack Sihirli Yorumları

İçe aktarma ifadesinin içinde webpack'in 'sihirli yorumlarını' kullanarak parça adlarına ve önceden getirme davranışına ilişkin ipuçları verin.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Önceden Getirme ve Ön Yükleme

önceden getirme: büyük olasılıkla bir sonraki gezinmeler için parçayı boşta kalma süresinde indirin. ön yükleme: geçerli rotanın kritik parçaları için parçayı yüksek öncelikle hemen indirin. Bağlantının üzerine gelme durumunda önceden getirmeyi, yakında kesinlikle gerekecek içerikler için ön yüklemeyi kullanın.

Paket Analiz Aracı

Parça boyutlarını görselleştirmek için rollup-plugin-visualizer (Vite) veya webpack-bundle-analyzer kullanın. Şunları arayın: gereğinden büyük parçalar, yinelenen bağımlılıklar ve kullanılmayan kodu ayıklamayı unuttuğunuz kitaplıklar.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Üçüncü Taraf Parçalarını Ayırma

Üçüncü taraf kitaplıklarını, uygulama kodunuzdan daha seyrek değişen ayrı bir parçada toplayın; tarayıcılar bu parçayı dağıtımlar arasında önbellekte tutabilir.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Bölmemeniz Gereken Durumlar: NOT

20 KB'ın altındaki küçük parçalar yarardan çok zarar verir; HTTP ek yükü, paket boyutundaki kazanımı aşar. Her bileşeni bölmeyin; rota sınırlarında ve gerçekten ağır özelliklerin çevresinde bölme yapın.

Hızlı Kontrol

React'in lazy() sarmalayıcısının doğru şekilde görüntülenebilmesi için neyle birlikte kullanılması gerekir?

Özet: Kod Bölme

Dinamik içe aktarmalar ayrı parçalar oluşturur. Bileşen bölme için React.lazy ve Suspense kullanın. React Router / Vue Router'da gecikmeli rota bileşenleri kullanın. Büyük olasılıkla bir sonraki parçalar için önceden getirmeyi, kritik parçalar için ön yüklemeyi kullanın. Paket analiz aracı gereksiz kullanımı ortaya çıkarır. Önbelleğe alınabilirlik için üçüncü taraf kitaplıklarını ayırın. 20 KB'ın altındaki çok küçük parçalardan kaçının.

Sıkça Sorulan Sorular

“Kod Bölme ve Tembel Rotalar” dersi ücretsiz mi?

Evet — “Kod Bölme ve Tembel Rotalar” 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.

“Kod Bölme ve Tembel Rotalar” dersinde ne öğreneceğim?

Paketi rota sınırlarında bölmek için dynamic import() kullanın, React ve Vue bileşenlerini tembel yükleyin ve derleme çıktısında parça boyutlarını izleyin. 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 4. dersidir.

“Kod Bölme ve Tembel Rotalar” 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

Temel Web Verileri: LCP FID CLS
Lighthouse Denetimleri ve Puanlama
Görsel Optimizasyonu: tembel yükleme biçimleri WebP
Kod Bölme ve Tembel Rotalar

← Frontend Academy Sayfasına Dön