Bundler — nedir, türleri nelerdir ve çalışma prensibi

Bundler Nedir?

Bundler (modül paketleyici), bir giriş noktasını (uygulamanın ana dosyası) alan ve tüm bağımlılıklarını yinelemeli olarak dolaşarak bir modül grafiği oluşturan bir komut satırı aracıdır. Çıktı olarak paketleyici, bir HTML sayfasına eklenebilecek veya bir mobil uygulamada çalıştırılabilecek bir veya daha fazla dosya üretir.

Modern Geliştirmede Neden Bir Paketleyici Gereklidir

Tarayıcılar uzun süre platform düzeyinde bir JavaScript modül sistemini desteklemedi. Bundler, yüzlerce import ve require ifadesini tek bir dosyaya dönüştürerek bu sorunu çözdü. Bugün, tarayıcılarda yerel ES modül desteği olsa bile, paketleyiciler ek görevler gerçekleştirir: JSX ve TypeScript dönüştürme, kod küçültme, yavaş yükleme için kod bölme ve geliştirmeyi hızlandırmak için sıcak modül değiştirme (HMR).

Mobil geliştirmede, React Native varsayılan paketleyici olarak Metro'yu kullanırken, Flutter Dart tabanlı kendi derleme sistemini kullanır. Paketleyici seçimi, geliştirme hızını, uygulama boyutunu ve çalışma zamanı performansını doğrudan etkiler.

Paketleme Nasıl Çalışır?

Paketleme birkaç aşamadan geçer: giriş dosyalarını ayrıştırma, bağımlılık grafiği oluşturma, modülleri dönüştürme ve çıktı dosyaları oluşturma. Her aşamada, paketleyici kaynak kodu dönüştürmek için loader'ları ve optimizasyon için eklentileri uygular.

Ayrıştırma ve Bağımlılık Grafiği Aşaması

Paketleyici giriş noktasından başlar, dosyayı okur ve bir AST (Soyut Sözdizimi Ağacı) oluşturur. AST'den tüm import ve require ifadeleri çıkarılır. Bulunan her içe aktarma için paketleyici, tüm bağımlılıklar tek bir grafikte toplanana kadar işlemi yinelemeli olarak tekrarlar.

// Bir paketleyicinin basitleştirilmiş uygulaması
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

Grafiği oluşturduktan sonra paketleyici, dosyaları JavaScript'e dönüştüren loader'ları (TypeScript → JS, SCSS → CSS, JSX → JSX işlevleri) uygular. Ardından eklentiler ek dönüşümler gerçekleştirir: küçültme, resim yerleştirme, service worker oluşturma.

Ana Paketleyici Türleri

Paketleyiciler üç nesle ayrılır: klasik, uzmanlaşmış ve ES modülleri tabanlı yeni nesil. Her türün kendi mimarisi ve uygulama alanı vardır.

Klasik Paketleyiciler

Webpack devasa bir ekosisteme sahip en yaygın paketleyicidir. Ana avantajı esnekliktir: binlerce loader ve eklenti neredeyse her derleme senaryosunu kapsar. Parcel, dosya uzantılarına göre gerekli dönüşümleri otomatik olarak algılayan sıfır yapılandırma yaklaşımı sunar. Her iki paketleyici de kod bölme ve HMR'yi destekler.

Uzmanlaşmış Paketleyiciler

Metro özellikle React Native için oluşturulmuştur ve yalnızca JavaScript ve TypeScript ile çalışır. Mimarisi mobil geliştirme için optimize edilmiştir: satır içi require'ları destekleme, modüllerin eşzamansız yüklenmesi ve Hermes motoruyla entegrasyon. Rollup, kitaplıklara ve npm paketlerine odaklanır, gereksiz sarmalayıcılar olmadan temiz ES modül çıktısı üretir.

Webpack, Metro ve Vite Karşılaştırması

Paketleyici seçimi platforma ve proje gereksinimlerine bağlıdır. Webpack çok yönlüdür ancak ayrıntılı yapılandırma gerektirir. Metro, React Native için tek seçenektir. Vite, yerel ES modülleri sayesinde en hızlı geliştirme deneyimini sunar.

Vite, bağımlılıkların ön paketlemesi için esbuild ve üretim derlemeleri için Rollup kullanır ve geliştirme modunda Webpack'e kıyasla 5–10 kat hız iyileştirmesi sağlar. Metro web hedeflerini desteklemez ancak React Native köprüsü ve Turbo Modülleri ile sorunsuz entegrasyon sağlar.

Projede Paketleyici Yapılandırması

Yapılandırma, farklı dosya türlerinin nasıl işleneceğini, derlemenin nerede oluşturulacağını ve hangi optimizasyonların uygulanacağını belirler. Tipik bir yapılandırma dosyası, giriş noktasını, modül kurallarını, eklentileri ve çıktı ayarlarını içerir.

React Native Web Projesi için Webpack Yapılandırma Örneği

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro, yapılandırma için ayrı metro.config.js ve babel.config.js dosyalarını kullanır. Webpack'in aksine, Metro'nun yapılandırması önemli ölçüde daha basittir çünkü paketleyici React Native'de uzmanlaşmıştır ve stiller veya resimler için loader yapılandırması gerektirmez.

Yaygın Derleme Hataları

Deneyimli geliştiriciler bile paketleme hatalarıyla karşılaşır. Duplicate module, package.json'daki sürüm uyumsuzluğu nedeniyle aynı bağımlılığın pakette birden çok kez göründüğü en yaygın sorunlardan biridir. Module not found, içe aktarma yolu yanlış olduğunda veya paket yüklenmediğinde oluşur.

Metro'ya Özgü Hatalar

Metro, mobil cihazlar için paket boyutlarıyla sınırlıdır. 2–5 MB sınırı aşıldığında, cihazda yetersiz bellek nedeniyle Unable to resolve module hatası oluşur. Çözüm, modüllerin yavaş yüklenmesi için satır içi require'lar ve RAM paketleri kullanmaktır. Metro ayrıca sembolik bağlantılara karşı hassastır, bu nedenle monorepo'lar yapılandırmada ek watchFolders ayarı gerektirir.

Webpack için tipik bir sorun, bir dosyanın beklenmeyen bir biçime sahip olması veya gerekli loader'ın eksik olması durumunda oluşan Module parse failed hatasıdır. Dosya uzantısını kontrol etmek ve module.rules'a uygun kuralı eklemek sorunu çözer. source-map-explorer kullanmak, son pakette yinelenen modülleri ve gereksiz bağımlılıkları bulmaya yardımcı olur.

Derlemeyi Hızlandırmak için Yapılandırma Optimizasyonu

Yavaş derlemeler, paketleyicilerle çalışırken ana sorunlardan biridir. Hızlandırmak için, çalıştırmalar arasında modül dönüştürme sonuçlarını kaydeden kalıcı önbelleğe alma kullanın. Webpack 5, cache: { type: 'filesystem' } ile dosya önbelleğe almayı destekler, Vite ön paketleme için esbuild kullanır ve Metro bellek içi modül önbelleğine güvenir. Ayrıca, zaten hazır paketleri yeniden işlememek için loader'larda node_modules için exclude belirtin.

Kod Bölme Stratejisi Seçimi

Kod bölme, paketi talep üzerine yüklenen parçalara ayırır. Farklı paketleyiciler bu stratejiyi farklı şekilde uygular. Webpack, her modül için ayrı parçalar oluşturan dinamik içe aktarma import()'ı destekler. Metro, gecikmeli yükleme için satır içi require'ları kullanır. Vite, ek yapılandırma olmadan otomatik olarak satıcı parçalarını ve dinamik içe aktarmaları böler. Strateji seçimi proje gereksinimlerine bağlıdır: mobil uygulamalar için, yavaş yüklemeli daha küçük başlangıç paketleri tercih edilir.

React Native'de kod bölmenin doğru çalışması için ek yapılandırma gerekir: Metro, inlineRequires aracılığıyla eşzamansız parçalar için yapılandırılmalıdır. Webpack ve Vite'de, dinamik import() sözdizimi kullanıldığında kod bölme kutudan çıkar çalışır ve otomatik olarak bölünme noktaları oluşturur. Maksimum verimlilik için, kritik parçalar için <link rel="preload"> aracılığıyla kod bölmeyi ön yükleme ipuçlarıyla birleştirin.