Bundle boyutu

Bundle Nedir

Bundle, uygulama kodunuzun ve bağımlılıklarının tarayıcı ve sunucu için birleştirilip optimize edilmiş çıktı dosyalarıdır. Bu işi yapan araca bundler denir. Küçük bundle daha hızlı iner, daha az çalıştırma süresi ister ve Core Web Vitals değerlerini iyileştirir.¹

JavaScript'in bedeli yalnızca indirme değildir: script'i işlemenin asıl maliyeti indirme ve CPU'da çalıştırma süresidir, bu da özellikle düşük güçlü telefonlarda hissedilir.² 2025'te medyan bir sayfa masaüstünde 708 KB, mobilde 646 KB JavaScript yüklüyordu.³

Bugün kullanacağınız bundler büyük ihtimalle hazır gelir. Next.js 16'da varsayılan bundler Turbopack'tir.⁴ Vite 8 ise Rolldown adlı tek bir Rust tabanlı bundler kullanır.⁵ Next.js code splitting ve tree shaking gibi optimizasyonları otomatik yapar; sizin işiniz bunlara engel olmamak ve neyin yüklendiğini görmektir.¹

Tree Shaking

Tree shaking, kullanılmayan kodun (dead code) bundle'dan atılmasıdır. Bundler, hangi modülün ne export ettiğini ve nerede import edildiğini import/export ifadelerinden çıkarır.⁶

// utils.ts
export function formatPrice(n: number) { /* ... */ }
export function parseCsv(text: string) { /* ... */ } // hiç import edilmiyor

// page.tsx
import { formatPrice } from "./utils"; // parseCsv bundle'a girmez

İşe yaraması için birkaç şart var:⁷⁸

• ES module kullanın. require() çalışma anında çağrılan bir fonksiyon olduğu için bundler onu derleme anında güvenle analiz edemez.

• sideEffects alanı: Bir paket package.json'da "sideEffects": false diyorsa bundler kullanılmayan dosyaları çekinmeden atar. Yalnızca import edildiği için çalışan dosyalar (polyfill, global CSS) listede belirtilmelidir, yoksa production'da düşebilir.

• Named import tercih edin ve ES module yayınlayan paketleri seçin. Kütüphanenin tamamını getiren import kalıpları eski kurulumlarda tree shaking'i bozabilir.

Code Splitting

Code splitting, bundle'ı parçalara bölüp ilk görünüm için gereken kodu önce, geri kalanı ihtiyaç olunca yüklemektir. Büyük bir başlangıç script'i ana thread'i meşgul eder, etkileşimi geciktirir.⁹ V8 ekibinin pratik kuralı: 50-100 kB'ı aşan bir bundle'ı daha küçük parçalara bölün.²

Temel araç dinamik import()'tur. Modül, satır çalıştığında ayrı bir dosya olarak iner:¹⁰

"use client";

export function Search({ names }: { names: string[] }) {
  return (
    <input
      onChange={async (e) => {
        const Fuse = (await import("fuse.js")).default; // yalnızca yazınca iner
        console.log(new Fuse(names).search(e.currentTarget.value));
      }}
    />
  );
}

React.lazy

Bir component'i ilk render edildiği anda yüklemek için lazy kullanılır. Yüklenirken Suspense fallback'i gösterir. İçe aktarılan component default export olmalı ve lazy çağrısı component'in dışında, modülün üst seviyesinde yapılmalıdır; içeride tanımlarsanız her render'da state sıfırlanır.¹¹

import { lazy, Suspense } from "react";

const MarkdownPreview = lazy(() => import("./MarkdownPreview"));

export function Editor() {
  return (
    <Suspense fallback={<p>Yükleniyor...</p>}>
      <MarkdownPreview />
    </Suspense>
  );
}

next/dynamic

Next.js'te next/dynamic, React.lazy ile Suspense'in birleşimidir. Lazy loading Client Component'ler için anlamlıdır; Server Component'ler zaten otomatik olarak bölünür.¹⁰

"use client";

import { useState } from "react";
import dynamic from "next/dynamic";

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <p>Grafik yükleniyor...</p>,
});

export function Report() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Grafiği göster</button>
      {open && <Chart />} {/* kod yalnızca tıklayınca iner */}
    </>
  );
}

Named export için import("./hello").then((mod) => mod.Hello) yazılır. ssr: false seçeneği yalnızca Client Component içinde çalışır, Server Component'te hata verir.¹⁰

Bundle'ı Görmek

Tahmin etmek yerine bundle'ın içine bakın. Bu araçlar her modülü alanı boyutuyla orantılı bir dikdörtgen olarak çizer (treemap).¹

Next.js

Next.js 16.1 ve sonrasında Turbopack ile çalışan yerleşik bir analiz aracı vardır:¹

$ pnpm dlx next analyze

Arayüzde route'a, client/server ortamına ve dosya türüne göre filtreleyebilir, bir modüle tıklayıp onu sayfaya hangi import zincirinin getirdiğini görebilirsiniz.¹¹² --output ile sonuç .next/diagnostics/analyze klasörüne kaydedilir; optimizasyon öncesi ve sonrasını karşılaştırmak için kullanışlıdır.¹ Araç ilk sürümlerde next experimental-analyze adıyla duyuruldu, eski yazılarda bu adı görebilirsiniz.¹²

Projeniz --webpack ile derleniyorsa @next/bundle-analyzer plugin'i ve ANALYZE=true npm run build komutu kullanılır.¹

Vite

Vite'ta yaygın seçenek rollup-plugin-visualizer'dır; build sonrası bir HTML rapor üretir.¹³

$ pnpm add --save-dev rollup-plugin-visualizer

// vite.config.ts
import { defineConfig, type PluginOption } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer({ gzipSize: true }) as PluginOption], // listede en sonda
});

Hiç ayar eklemeden bakmak isterseniz npx vite-bundle-visualizer aynı plugin'i sizin için çalıştırır.¹⁴

Paketin Maliyetini Kurmadan Görmek

Yeni bir bağımlılık eklemeden önce boyutuna bakın. Bundlephobia bir npm paketinin boyutunu, neyden oluştuğunu ve export'larını gösterir.¹⁵ pkg-size.dev paketi tarayıcınızda gerçekten kurup bundle'lar; önbellek yerine her seferinde taze kurulum yaptığı için iç içe bağımlılıklardaki değişiklikleri de yansıtır.¹⁶

Barrel Dosyaları

Barrel dosyası, kendi kodu olmayan, yalnızca başka modülleri yeniden export eden dosyadır (çoğunlukla index.ts). Her klasöre bir barrel koyulduğunda tek bir import, zincirleme olarak projenin büyük kısmını yükleyebilir; bu da özellikle geliştirme sunucusunu, testleri ve lint'i yavaşlatır.¹⁷

// components/index.ts (barrel)
export * from "./Button";
export * from "./Modal";
export * from "./DataGrid"; // Button'ı isteyen herkes bunu da işletir

İkon ve UI kütüphaneleri de büyük barrel'larla gelir; bazılarında giriş dosyasında 10.000'e yakın export vardır.¹⁸ Next.js bu yüzden optimizePackageImports seçeneğini sunar: barrel'ı analiz edip import'u doğrudan kullandığınız modüle yönlendirir.¹⁸ lucide-react, date-fns, @mui/material, react-icons gibi popüler kütüphaneler varsayılan olarak zaten optimize edilir; listede olmayan bir paket için elle eklersiniz:¹⁹

// next.config.ts
const nextConfig = {
  experimental: {
    optimizePackageImports: ["my-icon-library"],
  },
};

export default nextConfig;

Üçüncü Parti Script'ler

Analytics, tag manager, chat ve reklam script'leri sizin bundle'ınızda görünmez ama aynı ana thread'i kullanır. Sayfaların %90'ından fazlası en az bir üçüncü parti kaynak kullanıyor; medyan sayfa masaüstünde 83, mobilde 79 üçüncü parti isteği yapıyor.²⁰ Genel kural: kritik render yolunda gerekmiyorsa üçüncü parti script'i async ya da defer ile yükleyin.²¹

Next.js'te bunu next/script ve strategy prop'u ile yaparsınız:²²

import Script from "next/script";

export default function Page() {
  return <Script src="https://example.com/chat.js" strategy="lazyOnload" />;
}

worker stratejisi hâlâ deneyseldir ve App Router'da çalışmaz. onLoad gibi olay prop'ları yalnızca Client Component'te kullanılabilir.²²

Server Components ve Client Bundle

Server Component'te kullanılan kütüphaneler istemciye gönderilmez; tarayıcıya yalnızca üretilen HTML gider. Bu yüzden syntax highlighting, markdown işleme ya da grafik hazırlama gibi tarayıcı API'si ve etkileşim gerektirmeyen ağır işleri Server Component'e taşımak, client bundle'ı küçültmenin etkili bir yoludur.¹

Detaylı Öğrenmek İçin

• Resmi rehber: Next.js'in bundle analizi ve büyük bundle'ları küçültme rehberi.¹

• Temel okuma: Addy Osmani ve Mathias Bynens'in JavaScript'in maliyetini anlattığı V8 makalesi.²

• Konuşma: Stephen Cooper'ın tree shaking, sideEffects, barrel dosyaları ve CI'da bundle boyutu takibini anlattığı yaklaşık 26 dakikalık konuşma (WeAreDevelopers World Congress 2025).²³

• Konuşma: Abhijeet Prasad'ın build araçlarının ürettiği JavaScript'i küçültmeyi anlattığı 17 dakikalık konuşma (JSNation US 2024).²⁴

• Tree shaking pratikte: Smashing Magazine'in tree shaking başvuru rehberi.⁸