Web Programlama Eğitimi: Rota Bazlı JavaScript Yükünü Bölmek

Web programlama eğitimi için önce başlangıç yükünü ölçün

Code splitting'e başlamadan önce Chrome DevTools Performance panelinde, soğuk önbellekle bir rota açılışını kaydedin. Network panelinde JavaScript isteklerini JS filtresiyle seçin, Coverage sekmesinde kullanılmayan byte oranını alın ve Performance kaydında 50 ms üzerindeki Main Thread görevlerini işaretleyin. Karşılaştırmayı aynı cihaz sınıfında yapmak için Chrome DevTools CPU throttling değerini 4x, Network throttling değerini Fast 4G olarak sabitleyin. Hedef metrik, sadece toplam bundle boyutu değil, ilk rotada parse ve compile edilen JavaScript byte sayısıdır; V8 kullanılmayan modülü indirmiş olsa bile parse eder ve bu süre ana iş parçacığında etkileşimlerle yarışır.

# Vite projesinde chunk dağılımını görünür kılın
npm i -D rollup-plugin-visualizer

# Üretim derlemesini kaynak haritasıyla alın
npm run build -- --sourcemap
npx vite-bundle-visualizer

Bir frontend development eğitimi içinde sık görülen hata, yalnızca gzip boyutuna bakmaktır. `gzip` aktarım maliyetini gösterir; buna karşılık Chrome Performance'daki `Evaluate Script` ve `Compile Code` olayları cihazdaki CPU maliyetini gösterir. Önce-sonra tablosunda en az şu dört alanı kaydedin: ilk rota JS transfer byte'ı, Coverage'daki kullanılmayan byte, en uzun Evaluate Script süresi ve Lighthouse raporundaki Total Blocking Time. Aynı testte cache'i DevTools'tan kapatın; aksi halde ikinci ölçüm disk cache nedeniyle yanlış bir iyileşme gösterir.

ReactJS eğitimi: lazy import sınırını rota ve özellik düzeyinde kurmak

ReactJS eğitimi örneklerinde `React.lazy` çoğu zaman tek başına gösterilir, fakat hata ve yükleme durumunun da lazy sınırına yakın tutulması gerekir. Aşağıdaki yapı, yönetim paneli kodunun ana sayfa açılışında statik import ile graph'a girmesini engeller. `import()` çağrısı ancak `/admin` rotası eşleştiğinde çalışır; bundler bu noktada ayrı bir async chunk üretir.

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const AdminPage = lazy(() => import('./features/admin/AdminPage'));
const ReportsPage = lazy(() => import('./features/reports/ReportsPage'));

function RouteFallback() {
  return <div role="status" aria-live="polite">Yükleniyor</div>;
}

export function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route
        path="/admin"
        element={
          <Suspense fallback={<RouteFallback />}>
            <AdminPage />
          </Suspense>
        }
      />
      <Route
        path="/reports"
        element={
          <Suspense fallback={<RouteFallback />}>
            <ReportsPage />
          </Suspense>
        }
      />
    </Routes>
  );
}

Edge case: Lazy modülün içinden tekrar ana giriş dosyasını import etmek, örneğin `import { api } from '../../main'`, circular dependency veya shared chunk'ın beklenenden büyümesine yol açabilir. `api`, router ve store gibi ortak bağımlılıkları `src/platform/` altında giriş dosyasından bağımsız modüllere taşıyın. Ardından DevTools Network'te `/admin` açılmadan `AdminPage-*.js` isteğinin gelmediğini doğrulayın. Ayrıca hızlı rota değişiminde kullanıcı fallback'i görmeden hedef rotaya dönebileceği için Playwright ile istek sayısını ölçün: `page.goto('/')`, ardından `page.getByRole('link', { name: 'Yönetim' }).click()` sonrasında yalnızca bir admin chunk isteği bekleyin.

JavaScript eğitimi: chunk grafiğini Vite ve Rollup ile dengelemek

JavaScript eğitimi kapsamında dinamik import kullanmak yeterli değildir; ortak bağımlılıkların chunk grafiğindeki yerini kontrol etmek gerekir. Örneğin editör sayfasında kullanılan büyük bir markdown paketi ile yalnızca raporlarda kullanılan grafik paketi aynı `vendor` chunk'ına girerse, bir rota diğerinin maliyetini taşır. Vite'ın Rollup ayarında işlevsel `manualChunks` kuralı, bu bağımlılıkları farklı istekler haline getirir.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (!id.includes('node_modules')) return;
          if (id.includes('monaco-editor')) return 'editor';
          if (id.includes('chart.js') || id.includes('d3-')) return 'charts';
          if (id.includes('react') || id.includes('react-dom')) return 'react-core';
        }
      }
    }
  }
});

Bu ayarı körlemesine genişletmeyin. Her paketi ayrı chunk yapmak, HTTP/2 altında bile bağlantı önceliklendirmesi, header maliyeti ve cache miss sayısını artırabilir. Visualizer çıktısında önce `charts` ve `editor` chunk'larının yalnızca ilgili async rotalardan erişildiğini kontrol edin. Sonra aynı rota için önce-sonra ölçümünde ana giriş chunk'ının küçülürken toplam kritik istek zincirinin uzamadığını Lighthouse waterfall ile doğrulayın. Özellikle ortak bir modül iki lazy rota tarafından kullanılıyorsa onu zorla rota chunk'ına koymak yerine varsayılan shared chunk davranışını korumak, ikinci rota geçişindeki yeniden indirmeyi önler.

Frontend framework karşılaştırması: Angular, AngularJS ve Vue'da lazy yükleme

Frontend framework karşılaştırması yaparken aynı kavramın framework'e göre farklı derleme sınırları olduğunu hesaba katın. Angular eğitimi için standalone route ile `loadComponent`, modülün statik import edilmesini önler. Aşağıdaki rotada `UsersPageComponent` ilk bundle'a dahil edilmez; Angular router ilgili URL'ye geçildiğinde import promise'ini çözer.

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'users',
    loadComponent: () =>
      import('./users/users-page.component')
        .then(m => m.UsersPageComponent)
  },
  {
    path: 'billing',
    loadChildren: () =>
      import('./billing/billing.routes')
        .then(m => m.BILLING_ROUTES)
  }
];

VueJS eğitimi tarafında Vue Router'a `component: () => import('./views/AnalyticsView.vue')` vermek aynı async sınırı oluşturur; üretim çıktısını `npx vite-bundle-visualizer` ile inceleyin. AngularJS eğitimi verilen eski uygulamalarda ise router template'i lazy olsa bile controller ve servisler genellikle ana bundle'da kalır. ui-router ile ocLazyLoad kullanılıyorsa, lazy yüklenen dosyanın uygulama modülünü ikinci kez bootstrap etmediğinden emin olun; sadece `angular.module('app.reports', [])` kaydı yapılmalı, `angular.bootstrap(...)` çağrısı yapılmamalıdır. Bu çift bootstrap hatası, DOM'a iki watcher ağacı bağlayarak hem bellek hem digest maliyeti üretir.

React Native eğitimi için web'deki rota chunk'ı mantığını doğrudan transfer etmeyin. Metro, tarayıcı bundler'larındaki HTTP tabanlı chunk yükleme modelini varsayılan olarak kullanmaz; ekranları `React.lazy` ile bölmek yerine Hermes profile ve `npx react-native profile-hermes` çıktısı üzerinden başlangıç JavaScript çalışma maliyetini inceleyin. Ortak ürün kodu web ve mobilde paylaşılıyorsa, web'e özgü ağır bir paketi `*.web.tsx` dosyasına ayırmak, Metro'nun mobil bundle'ına yanlışlıkla girmesini engeller.

Bundle bütçesini CI'da kırılan bir sözleşmeye dönüştürmek

Elle yapılan bundle denetimi zamanla kaybolur. `size-limit` ile ana giriş ve kritik async chunk için byte limiti tanımlayın, ardından pull request doğrulamasında komutu çalıştırın. Limitleri ilk ölçümden türetin: örneğin mevcut gzip boyutu 145 KB ise doğrudan 100 KB hedefi koymak yerine, önce rota ayrımından sonra oluşan yeni tabanı ölçün ve kabul edilen artışı 5 KB gibi somut bir eşikle sınırlayın.

npm i -D size-limit @size-limit/file

# package.json
{
  "size-limit": [
    { "path": "dist/assets/index-*.js", "limit": "160 KB", "gzip": true },
    { "path": "dist/assets/charts-*.js", "limit": "90 KB", "gzip": true }
  ],
  "scripts": {
    "build": "vite build",
    "size": "size-limit"
  }
}

# CI adımı
npm ci && npm run build && npm run size

Bütçe ihlalinin nedenini bulmak için CI artifact'ı olarak `stats.html` veya Visualizer raporunu saklayın; sadece kırmızı build çıktısı bağımlılığı göstermez. Ayrıca chunk dosya adları hash içerdiğinden wildcard desteklemeyen araçlarda build sonrası manifest okuyun. Vite'ın `dist/.vite/manifest.json` dosyasından gerçek dosya yolunu alıp ölçmek, `index-*.js` glob'unun birden fazla eski artifact eşleştirmesi gibi yanıltıcı sonuçları engeller. Bu kontrol, özellik eklenirken örneğin bir tarih kütüphanesinin ana girişe statik import edilmesini merge aşamasında yakalar.

Sık Sorulan Sorular

web programlama eğitimi içinde code splitting başarısını nasıl ölçerim?

Chrome DevTools Coverage ile ilk rota açılışındaki kullanılmayan JavaScript byte'ını, Performance paneliyle Evaluate Script sürelerini ve Lighthouse ile Total Blocking Time değerini aynı throttling ayarlarında kaydedin. Değişiklikten sonra ana chunk küçülmüş ama kritik istek zinciri uzamışsa Network waterfall üzerinden yeni async chunk'ın geç başlatılıp başlatılmadığını kontrol edin.

reactjs eğitimi için React.lazy mi, yoksa manuel dynamic import mu kullanmalıyım?

Rota veya bileşen render edildiğinde yüklenecek UI modülleri için `React.lazy(() => import(...))` ve `Suspense` kullanın. Kullanıcı tıklamasından sonra çalışan dışa aktarımlarda, örneğin PDF üretiminde, olay işleyicisinde `const { createPdf } = await import('./pdf')` daha uygundur. Her iki durumda da static import'un aynı modülü başka bir yerden ana graph'a sokmadığını Visualizer ile doğrulayın.

angular eğitimi ve vuejs eğitimi projelerinde vendor chunk neden aşırı büyür?

Bir grafik, editör veya tarih paketi root component, ortak layout ya da global store tarafından statik import edilirse bundler onu başlangıç graph'ına bağlar. Angular'da `loadComponent` veya `loadChildren`, Vue'da route-level `() => import(...)` kullanın. Sonra kaynak haritalı üretim build'ini Visualizer ile inceleyip paketin yalnızca hedef async chunk'ta bulunduğunu doğrulayın.

angularjs eğitimi veya react native eğitimi projelerinde web code splitting aynen uygulanır mı?

Hayır. AngularJS uygulamasında ocLazyLoad gibi araçlar modül kaydı ve script yükleme düzenini ayrıca yönetir; modülü tekrar bootstrap etmek watcher ağacını çoğaltır. React Native tarafında Metro ve Hermes çalışma modeli tarayıcının rota bazlı HTTP chunk modelinden farklıdır; Hermes profile çıktısı, `*.web.tsx` ayrımı ve başlangıç import graph'ı üzerinden analiz yapın.