Bundler

Modül Paketleyici

Okunuşu: bandlır

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Bundler, JavaScript modüllerini ve bağımlılıklarını tarayıcıların hızlıca indirip çalıştırabileceği birkaç optimize dosyada birleştiren bir derleme aracıdır.

JavaScript bundler nedir?

Bundler, bir web uygulamasının JavaScript ya da TypeScript modülleri, CSS, görseller ve npm'den yüklenen paketler gibi pek çok kaynak dosyasını alıp bundle adı verilen az sayıda optimize dosyada birleştiren bir araçtır. Modern uygulamalar binlerce modül içerebilir ve her birini ayrı bir istekle yüklemek sayfaları yavaşlatırdı; bu yüzden bundler onları tarayıcı için paketler.

Bir giriş dosyasından (entry) başlar, bir bağımlılık grafiği oluşturmak için her import ifadesini izler ve kodu doğru sırayla çıkarır. Bu sırada genellikle kodu dönüştürür (örneğin TypeScript veya JSX'i derler), tree shaking ile kullanılmayan dışa aktarımları kaldırır, sonucu küçültmek için minify eder ve her sayfanın yalnızca ihtiyacı olanı indirmesi için code splitting ile parçalara (chunk) böler. Yaygın kullanılan bundler'lar arasında webpack, Rollup, esbuild, Parcel, Rolldown ve Turbopack bulunur; Vite gibi araçlar ise bunları hızlı bir geliştirme sunucusuyla sarmalar.

Bir yolculuk için bavul hazırlamayı düşünün: elli ayrı eşya taşımak yerine her şeyi düzenli tek bir bavula katlar, gerekmeyenleri geride bırakırsınız. Bundler'lar ayrıca yerel geliştirme sunucularıyla ve değişen kodu tam sayfa yenilemesi olmadan çalışan sayfaya yerleştiren hot module replacement ile geliştirme deneyimine de güç verir.

Bundler çoğunlukla paket yöneticisi ya da transpiler ile karıştırılır. npm gibi bir paket yöneticisi projenizin bağımlı olduğu kütüphaneleri indirir, Babel veya TypeScript derleyicisi gibi bir transpiler kodu bir söz diziminden diğerine dönüştürür, bundler ise tüm bu kodu tarayıcıya hazır dosyalarda birleştirir. Tarayıcılar artık yerel ES modüllerini desteklediği için bazı araçlar geliştirme sırasında paketlemeyi atlar, ancak üretim derlemeleri hız için hâlâ genellikle paketlenir.

Önemli noktalar

Bundler, birçok modülü ve varlığı (asset) birkaç optimize dosyada birleştirir.
Bağımlılık grafiği oluşturmak için bir giriş noktasından import ifadelerini izler.
Tree shaking, minification ve code splitting paketleri küçültür ve daha hızlı yüklenir hale getirir.
Paket yöneticisi bağımlılıkları yükler; bundler onları tarayıcı için paketler.
Bundler tabanlı geliştirme sunucuları geliştirme sırasında hot module replacement sunar.

Örnek

Bir bundler'ın iki modülle yaptığı işjavascript

// src/math.js
export const add = (a, b) => a + b;
export const unused = () => "never imported"; // removed by tree shaking

// src/main.js (the entry point)
import { add } from "./math.js";
console.log(add(2, 3));

// Build with a command such as:
// npx esbuild src/main.js --bundle --minify --outfile=dist/bundle.js

// dist/bundle.js is roughly one minified line:
// (()=>{var o=(n,d)=>n+d;console.log(o(2,3));})();

Sık sorulan sorular

Neden bir bundler'a ihtiyacım var?

Bundler, birçok modülü ve npm paketini birkaç optimize dosyaya dönüştürür; bu da ağ isteklerini azaltır, kullanılmayan kodu kaldırır ve TypeScript, JSX ile modern söz dizimini kullanmanıza olanak tanır. Yalnızca birkaç betiği olan küçük siteler onsuz da sorunsuz çalışabilir.

Bundler ile paket yöneticisi arasındaki fark nedir?

npm, pnpm veya Yarn gibi bir paket yöneticisi projenizin kullandığı kütüphaneleri indirir ve sürümlerini izler. Bundler ise sizin kodunuzu ve bu kütüphaneleri tarayıcıların yükleyebileceği dosyalarda birleştirir.

Tree shaking nedir?

Tree shaking, kodunuzun hiç import etmediği dışa aktarımları kaldıran bir bundler optimizasyonudur. ES modül import ve export söz diziminde en iyi şekilde çalışır; çünkü bunlar kod çalıştırılmadan analiz edilebilir.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin