Vite ile webpack arasındaki temel fark nedir? Tree shaking nasıl çalışır, neden bazen çalışmaz?

webpack geliştirme sırasında da tüm uygulamayı bundle'lar; proje büyüdükçe başlangıç ve HMR yavaşlar. Vite ise geliştirmede bundle yapmaz: kaynak dosyaları tarayıcıya native ES module olarak sunar, sadece istenen dosyayı anında dönüştürür ve node_modules bağımlılıklarını önceden paketler. Production build'de ise optimize bir bundle üretir. Vite 7'ye kadar dev'de esbuild, build'de Rollup kullanılıyordu; Vite 8 (Mart 2026) ile ikisinin yerini Rust tabanlı tek bundler Rolldown aldı.

Rspack (webpack uyumlu, Rust) ve Turbopack (Next.js 16'da varsayılan) de alternatiflerdir.

Tree shaking

Bundler, ES module import/export ifadelerini statik analiz ederek hiç kullanılmayan export'ları çıktıdan atar.

import { debounce } from "lodash-es"; // sadece debounce dahil edilir
import _ from "lodash";               // CommonJS: tüm kütüphane gelir

Neden çalışmaz?

• Kütüphane CommonJS (require) ile yayınlanmışsa statik analiz yapılamaz.
• Side effect'ler: Modülün en üst seviyesinde global'i değiştiren kod varsa bundler onu silmeye cesaret edemez. Kütüphaneler package.json'da "sideEffects": false (veya CSS dosyaları gibi bir liste) belirtmelidir.
• import * as utils ve dinamik erişim (utils[name]) analizi bozar.
• Barrel dosyaları (index.ts her şeyi re-export eder) bazı araçlarda gereksiz modülleri çekip build'i yavaşlatır.
• Babel'in ESM'i CommonJS'e çevirmesi (modules: "commonjs").

Bundle içeriğini rollup-plugin-visualizer veya webpack-bundle-analyzer ile doğrulayın.